FullCalendarで特定の日付に飛ぶボタンを設置する

公開日：2024年06月24日カテゴリー：JavaScript, 開発

みなさんは1ヶ月後の1週間の予定、前月の同日の予定を確認したいということはありませんか？

今回はFullCalendarを利用したカレンダー画面で、単に前週/次週に飛ぶだけでなく、特定の日付に飛ぶようなカスタムボタンを設置してみましたのでご紹介します。

使用したバージョンはFullCalendar v5.11.3です(｀･ω･´)ゞ

やりたいこと

・ウィークリー表示のときに、月単位で同日の週に飛ぶボタンを追加したい

・デイリー表示のときに、月単位で同日に飛ぶボタンを追加したい

デフォルトで設置できるボタンは、ウィークリーカレンダーだと前週/次週、デイリーカレンダーだと前日/次日に遷移するため、少しカスタマイズする必要があります。

サンプルコード

const BUTTON_DISPLAY_SETTINGS = {
    'dayGridMonth': 'none',
    'timeGridWeek': 'inline-block',
    'timeGridDay': 'inline-block',
};
let date = new Date();
let calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'dayGridMonth',
    timeZone: 'Asia/Tokyo',
    locale: 'ja',
    buttonText: {
        month: '月',
        week: '週',
        day: '日',
    },
    customButtons: {// ①カスタムボタンの追加
        prevMonth: {
            text: '前月',
            click: function () {
                date.setMonth(date.getMonth() - 1);
                calendar.gotoDate(date); // ②前月へ飛ばす
            }
        },
        nextMonth: {
            text: '次月',
            click: function () {
                date.setMonth(date.getMonth() + 1);
                calendar.gotoDate(date); // ②次月へ飛ばす
            }
        },
        today: {
            text: '今日',
            click: function () {
                date = new Date(); // ③「今日」ボタン押下時はdateをリセットする
                calendar.today();
            }
        }
    },
    headerToolbar: { // ④ヘッダー要素にカスタムボタンを追加する
        left: 'prev,next today prevMonth,nextMonth',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    datesSet: function (view) { // ⑤マンスリー表示の際はボタンを表示しないようにする
        let viewType = view.view.type;
        $('.fc-prevMonth-button').css('display', BUTTON_DISPLAY_SETTINGS[viewType]);
        $('.fc-nextMonth-button').css('display', BUTTON_DISPLAY_SETTINGS[viewType]);
    }
});
calendar.render();

const BUTTON_DISPLAY_SETTINGS = {

'dayGridMonth': 'none',

'timeGridWeek': 'inline-block',

'timeGridDay': 'inline-block',

};

let date = new Date();

let calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {

initialView: 'dayGridMonth',

timeZone: 'Asia/Tokyo',

locale: 'ja',

buttonText: {

month: '月',

week: '週',

day: '日',

customButtons: {// ①カスタムボタンの追加

prevMonth: {

text: '前月',

click: function () {

date.setMonth(date.getMonth() - 1);

calendar.gotoDate(date); // ②前月へ飛ばす

}

nextMonth: {

text: '次月',

click: function () {

date.setMonth(date.getMonth() + 1);

calendar.gotoDate(date); // ②次月へ飛ばす

}

today: {

text: '今日',

click: function () {

date = new Date(); // ③「今日」ボタン押下時はdateをリセットする

calendar.today();

}

headerToolbar: { // ④ヘッダー要素にカスタムボタンを追加する

left: 'prev,next today prevMonth,nextMonth',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay'

datesSet: function (view) { // ⑤マンスリー表示の際はボタンを表示しないようにする

let viewType = view.view.type;

$('.fc-prevMonth-button').css('display', BUTTON_DISPLAY_SETTINGS[viewType]);

$('.fc-nextMonth-button').css('display', BUTTON_DISPLAY_SETTINGS[viewType]);

}

});

calendar.render();

手順を追って説明していきます(*‘ω‘ *)

①customButtonsで追加したいボタン（prevMonthとnextMonth）を作成する。

②カスタムボタンのclickイベントに、gotoDateメソッドを利用して特定の日付へ飛ばす処理を記述。今回は前月/次月へ飛ばしたかったため、その日付を指定する。

③「今日」ボタン押下時に、カスタムボタン用に日付を保持していた変数dateを当日でリセットする。

④headerToolbarに①で作成したカスタムボタンを追加する。

⑤マンスリー表示のときはこのボタンは表示したくなかったため、datesSetで表示の制御を行う。datesSetは、新しい日付範囲に移動したときにトリガーされるイベントなので、そのときにCSSで非表示にするような処理を追加。受け取るパラメータviewには新しい表示範囲に関する詳細情報が入っており、そこからカレンダータイプを取得。

完成形がコチラ▼▼▼