FullCalendar #3：ツールバー

※ 前回記事：#2：日本語化
※ 記事一覧
※ 参考：https://fullcalendar.io/docs/headerToolbar

ツールバー

ヘッダとフッタの左側・中央・右側、それぞれに表示するオブジェクトを指定できる。
※ オブジェクトとは 前月・翌月ボタンやタイトルのこと

ヘッダは "headerToolbar"、フッタは "footerToolbar" の属性に指定

さらに それぞれに start(左側)、center(中央)、end(右側) の属性があり、
それらの値にオブジェクトの名前を","区切りの文字列として指定する。

指定可能なオブジェクトの名前
・title (現在の月/週/日を含むテキスト)
・prev (カレンダーを1か月/週/日に戻すためのボタン)
・next (カレンダーを1か月/週/日進めるためのボタン)
・prevYear (カレンダーを年に戻すためのボタン)
・nextYear (カレンダーを1年進めるためのボタン)
・today (カレンダーを現在の月/週/日に移動するためのボタン)
・dayGridDay (日ビュー)
・dayGridWeek (週ビュー)
・dayGridMonth (月ビュー)
・timeGridWeek (時刻ビュー)
・listDay (日予定リスト) ・listWeek (週予定リスト)
・listMonth (月予定リスト)
・listYear (年予定リスト)

ヘッダの左側、フッダの右側にすべて表示させてみる

<div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'ja',
            headerToolbar: {
                start: 'title,prev,next,prevYear,nextYear,today,dayGridDay,dayGridWeek,dayGridMonth,timeGridWeek,listDay,listWeek,listMonth,listYear',
                center: '',
                end: '',
            },
            footerToolbar: {
                end: 'title,prev,next,prevYear,nextYear,today,dayGridDay,dayGridWeek,dayGridMonth,timeGridWeek,listDay,listWeek,listMonth,listYear',
            },
        });
        calendar.render();
    });
</script>

---

FullCalendar, JavaScript, JS, ライブラリ