【カレンダー】プラグインでカレンダー表示【fullcalendar.js】

プラグインの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'
			}
		]
	});
});
タイトルとURLをコピーしました