最近、弊社製品ODINに機能アップデートがあり、配送予定をカレンダーで管理できるという機能が追加されました。
ここで使われている FullCalendar について、どのようなことができて、どのように使うのか紹介します。
できるもの
カレンダー上に予定を表示します。
日付欄や予定がクリックされたときには、FullCalendar独自のイベントが発生し、その予定に関連した処理をさせることができます。
カレンダーの表示
<div id=”calendar”>にカレンダーを描画するという処理を行っています。
<div id="calendar"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script> FullCalendarでは予定の表示方法が複数提供されていて、1つ1つの表示方法を「view」としています。
initialViewに「dayDridMonth」というviewを指定することで下のような見た目になります。
予定の表示とコールバック関数の設定
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
title: '予定1',
start: '2021-09-15 10:00:00',
end: '2021-09-15 12:00:00',
},
{
title: '予定2',
start: '2021-09-17 21:00:00',
end: '2021-09-18 02:00:00'
},
{
title: '予定3',
start: '2021-09-20',
allDay: true
}
],
dateClick: function (jsEvent) {
alert('日付がクリックされました。\n' + jsEvent.dateStr);
},
eventClick: function (jsEvent) {
alert(jsEvent.event.title+'がクリックされました。\n' + jsEvent.event.startStr);
}
});
このクリックイベントを使えば、ユーザーに予定を登録・編集させることができます。
また、今回は「events」オプションに直接予定を記入していますが、JSONを返すスクリプトのURLを指定することでも、予定を設定できます。
document.addEventListener('DOMContentLoaded', function () {
let calendarEl = document.getElementById('calendar')
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: '/getEvents.php',
dateClick: function (jsEvent) {
alert('日付がクリックされました。\n' + jsEvent.dateStr);
},
eventClick: function (jsEvent) {
alert(jsEvent.event.title+'がクリックされました。\n' + jsEvent.event.startStr);
}
});