fullCalendar dayGridWeek で週変更ボタン(<,>)を日付レベルで変更できるようにする

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の日付に移動。

ライブラリの標準機能にないのかなぁ、。(見つけてないだけ？？)