FullCalendarで営業日カレンダーを作成する（小さいカレンダー）

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

営業日カレンダーを作成したくて、FullCalendarのオプションを色々いじって実装しました。

バージョン：fullcalendar-2.4.0

js

$(document).ready(function() {

	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: ''
		},
		buttonText: {
			today: '今日'
		},
		dayNamesShort: ['日','月','火','水','木','金','土'],
		defaultDate: '2016-02-03',
		businessHours: false,
		titleFormat: {
			month: 'MMM YYYY'
		},
		// 表示用データ
		events: [
			{
				start: '2016-02-09',
				rendering: 'background',
				color: '#ff9f89'
			},
			{
				start: '2016-02-06',
				end: '2016-02-08',
				rendering: 'background',
				color: '#ff9f89'
			},
			{
				start: '2016-02-13',
				end: '2016-02-15',
				rendering: 'background',
				color: '#ff9f89'
			},
			{
				start: '2016-02-20',
				end: '2016-02-22',
				rendering: 'background',
				color: '#ff9f89'
			},
			{
				start: '2016-02-27',
				end: '2016-02-29',
				rendering: 'background',
				color: '#ff9f89'
			},
		]
	});
});

eventsのデータの中で、

dayNamesShort: [‘日’,’月’,’火’,’水’,’木’,’金’,’土’]で曜日の表示を1文字にします。

rendering: ‘background’を指定することにより、そのイベントの日が背景色の表示になります。

color: ‘#ff9f89’を指定することにより、休日っぽい色にしています。

businessHours: falseで土日の背景色を無効にしています。

実際はevents部分のデータはjsonでサーバから取得していたのですが、今回は表示のテスト用にjsの中に記述しています。

css

body {
	margin: 40px 10px;
	padding: 0;
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 14px;
}

#calendar {
	max-width: 220px;
	margin: 0 auto;
}

max-width: 220px;でカレンダーのサイズを指定します。

また、デフォルトのままだとスクロールバーが出たりするので、微調整します。

css続き

.fc-basic-view .fc-body .fc-row {
	min-height: 1em !important;
}

.fc button {
	height: 2em !important;
	padding: 0 .1em !important;

	/* text & cursor */
	font-size: 0.8em !important;
}

jsのオプションでセルの高さを指定する方法がわからなかった（小さくできなかった）ので、fullcalendar.cssのスタイルを一部上書きしています。

これで冒頭の営業日カレンダーを作成することができました。