プラグインのfullcalendar.jsを利用してカレンダーを表示します。バージョンはv3.10.0です。祝日の背景色表示、イベントの色変更、イベントの開始日時と終了日時表示を設定しています。
外部ファイルは下記の通りに読み込みます。
fullcalendar.min.css
moment.min.js //日付フォーマット用
fullcalendar.min.js
ja.js //FullCalendarを日本語表記に変更
gcal.min.js //Google Calendarから祝日を取得
htmlのコードは下記になります。
id=”calendarBox”を付与した空のdivタグ内にカレンダーを表示させます。
<div id="calendarBox"></div>
最後にjQueryのコードです。
eventSourcesで祝日の背景色表示の設定をします。Google CalendarのApiKeyの設定が必要です。イベントの色変更は対象のイベントにbackgroundColorとborderColorを設定します。イベントの終了時刻はデフォルトでは表示されないため、displayEventEnd: trueを設定します。
$(function() {
$('#calendarBox').fullCalendar({
defaultDate: '2019-10-17',
firstDay: 1,
displayEventTime: true,
displayEventEnd: true,
timeFormat: 'D日H:mm',
eventSources: [
{
googleCalendarApiKey: 'XXXXX',
googleCalendarId: 'japanese__ja@holiday.calendar.google.com',
rendering: 'background',
color:"#ffd0d0"
}
],
events: [
{
title: '来客',
start: '2019-10-20',
backgroundColor: 'green',
borderColor: 'green'
},
{
title: '旅行',
start: '2019-10-07T06:00:00',
end: '2019-10-09T22:00:00'
}
]
});
});