この記事はアピリッツの技術ブログ「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のスタイルを一部上書きしています。
これで冒頭の営業日カレンダーを作成することができました。
