FullCalendar 月・週・日カレンダーを表示する方法

はじめに

FullCalendar という素晴らしい強力なライブラリを見つけました。（とても有名だと思いますが、知りませんでした・・・。）
英語のドキュメントばかりなので、日本語で誰かに役に立てばと思いまとめさせていただきました。

今回は月・週・日カレンダーのそれぞれに切り替える方法をまとめました。

関連リンク

関連リンクを下記に載せておくので、必要であれば参考にしてください。。

• 【Rails】 5分でFullCalendar実装する方法
  • https://qiita.com/syukan3/items/68280ce4ff45aa336363

前提条件

FullCalendarをアプリケーションに実装済みであること。

Railsアプリケーションで実装ができていない方は上記の記事を参考にしてみてください。
Railsを使ったことがない人でも簡単に実装することができますので、この機会にRuby と Railsをインストールして使ってみてください。

実装

javascript に 2箇所ほど追記をすれば実装することができます。

app/assets/javascripts/application.js

    $('#calendar').fullCalendar({
        // ***省略***

        // month: "月",  agendaWeek: "週", agendaDay: "日"
        // 不要なテーブルは month, agendaWeek, agendaDay を消すと選択肢が消える。
        header: {
            // ここ
            left: 'month, agendaWeek, agendaDay',
            center: 'title',
            right: 'today prev,next'
        },

        // デフォルトで表示させたいテーブル（この場合は、週のカレンダーを表示させる）
        // ここ
        defaultView: 'agendaWeek',

        // ***省略***

イメージ

こちらは完成イメージとなります。
月・週・日と書かれたボタンを押すことで、それぞれのカレンダー表記に切り替える事ができます。

まとめ

公式ドキュメントに載っている事ですが、探すのに時間がかかったためまとめました。
しばらく、このFullCalendar関連の記事をまとめたいと思います。

参考

• FullCalendar 公式ドキュメント
  • https://fullcalendar.io/