FullCalendar v5.10.0
Angular,React,Vue,といったフレームワークにも対応した便利なカレンダーライブラリ。
今回はフレームワークは使用していない環境下での話ですが、参考になればと。
nodejs環境下であるため、プラグインの宣言方法など違いがあるかもしれません。
週単位で閲覧範囲が遷移する仕様
initialView
をdayGridWeek
に設定すると、
デフォルトで<
,>
のボタンが設置され、押下すると次週に遷移する。
例:10月
> 押下前 |
1(Fri) | 2(Sat) | 3(Sun) | 4(Mon) | 5(Tue) | 6(Wed) | 7(Thu) |
---|---|---|---|---|---|---|---|
> 押下後 |
8(Fri) | 9(Sat) | 10(Sun) | 11(Mon) | 12(Tue) | 13(Wed) | 14(Thu) |
日付単位で表示範囲を変更したい
例:10月
> 押下前 |
1(Fri) | 2(Sat) | 3(Sun) | 4(Mon) | 5(Tue) | 6(Wed) | 7(Thu) |
---|---|---|---|---|---|---|---|
> 押下後
|
2(Sat) | 3(Sun) | 4(Mon) | 5(Tue) | 6(Wed) | 7(Thu) | 8(Fri) |
解決策
customButtons、headerToolbarで解決。
const date = new Date();
const calendar = new Calendar(document.getElementById('your-custom-id'), {
plugins: [dayGridPlugin],
initialView: 'dayGridWeek',
locale: 'ja',
firstDay: date.getDay(),
customButtons: {
nextDate: {
text: '>',
click: () => {
date.setDate(date.getDate() + 1);
calendar.setOption('firstDay', date.getDay());
calendar.gotoDate(date);
}
},
prevDate: {
text: '<',
click: () => {
date.setDate(date.getDate() - 1)
calendar.setOption('firstDay', date.getDay());
calendar.gotoDate(date);
}
}
},
headerToolbar: {
left: 'prevDate,nextDate',
center: 'title',
right: ''
}
});
解説
標準で用意されているボタンを非表示にして、カスタムボタンで対応。
・日付型データを作成
・firstDayにgetDayの値(曜日)を入れる。
カスタムボタンで<
,>
を作成し、クリックイベントで
・dateの加減算
・setOptionメソッドでカレンダーのfirstDayを更新、(ココがミソ)
・gotoDateメソッドでカレンダーをdateの日付に移動。
ライブラリの標準機能にないのかなぁ、。(見つけてないだけ??)