FullCalendarでビューポートのサイズに応じてデフォルトのカレンダー形式を切り替え

こんなことがしたかった

• FullCalendarのデフォルト表示形式を、スマホとPCで切り替えたかった

Djangoで作っている予定管理アプリのようなものを、スマホで見た場合月間カレンダー形式だと分かりづらかったので、リスト表示にしたかった。 今回は完全にFullCalendarの話。

こんな感じ

FullCalendarのオプションである「defaultView」をビューポートの横幅に応じて変えましょうという試み。

PC表示(defaultView:dayGridMonth)

スマホ表示(defaultView:listYear)

プログラムは以下。動かなかったらごめんなさい。あとjs苦手なので汚いかもです。

※前提として、FullCalendarに必要なjsやcssは読み込まれていること

<script>
// コンテンツが読み込まれてから発火
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

　　// FullCalendarのオプション設定
        var options = {
            locale:'ja',
            plugins: [  'dayGrid', 'list'],
　　　〜オプション中略〜
            // PC用のdefaultViewを設定
            defaultView:'dayGridMonth',
　　　〜オプション中略〜
            events: [
　　　　　(表示イベントを書く)
            ]
        };

　　// ウィンドウのサイズが700未満ならdefaultViewの書き換え
        if ($(window).width() < 700) {
            options.defaultView = 'listYear'; 
        };

　　// カレンダーのレンダリング
        var calendar = new FullCalendar.Calendar(calendarEl, options);
        calendar.render();
    });
</script>

実装してみて

最初はツールチップで詳細予定出すか？などを考えていたものの、結局スマホで月間カレンダーの中身を見るのには限界があるので、リスト表示にしてしまうのが良かろうという結論に。

Google Calendarだってそうしてるんだし…でもTimeTreeは月間カレンダーなんだよなぁ。

参考文献

javascript - ビューポートの幅に基づいてfullCalendarビューとヘッダーオプションを変更しますか？

Documentation | FullCalendar

今回はstackoverrunがかなり参考になった…。