プログラム開発の情報や、雑記を投稿しているサイトです。

FullCalendarの利用方法

本記事では、FullCalendarの利用方法を解説しています。

JavaScriptとPHPのシンプルなサンプルで、色々なカスタマイズを記載していますので、

ぜひ、参考にしてみてください。

インストール

下記の公式サイトから、バージョンを指定して、ライブラリをダウンロードします。

https://fullcalendar.io/

※v5系は、イベント関係の処理が大きく変わっています。
※v4系の方が、イベントまわりについては、過去のサンプルを流用しやすいです。

手動の場合には、ダウンロードしたファイルを、js、cssファイルに置きます。
npmを利用できる場合には、下記のコマンドを実行してインストールします。

イベントの設定

最初に、カレンダーに表示するイベントの設定を行います。
イメージとしては、下記のカレンダーのイベント設定になります。

イベントの同期設定

イベントを動的に取得する場合には、eventsに取得先のURLを設定します。

start、endは、リクエストパラメータが付与されてきます。

ロケール設定

ロケールを設定する場合には、下記の設定を追加します。

スクロールの非表示

カレンダーに表示されるスクロールを非表示にする場合には、スタイルシートで対応する方法が一番簡単です。
スタイルシートには、下記の設定を追加します。

公式サイト

https://fullcalendar.io/