jQueryのプラグイン「FullCalendar」を使ってWebページにカレンダーを表示する方法

お店のホームページや予約サイトなどで、カレンダーを表示したいと思ったことはありませんか？「一からプログラムするのは時間がかかるし、かといってテンプレートを使うと自分好みにカスタマイズができないし……」と悩んでいる方に朗報です。

実は、jQueryのプラグインを使えば簡単にカスタマイズ可能なカレンダーを作ることができるのです。この記事では、jQueryのカレンダープラグインである「FullCalendar」について使い方を分かりやすく解説していきます。

PG

数行のコードだけで綺麗なカレンダーが表示できるのですね。

PM

見た目が綺麗なのでユーザーにとっても使い勝手が良いため、おすすめです。

jQueryのカレンダープラグイン｜FullCalendarとは

「FullCalendar」とは、カレンダーを表示させることができるjQueryのオープンソースプラグインです。
※オープンソース：ソースコードが公開されているということ。つまり、誰でも利用できる。

FullCalendarを使うと、スッキリと整ったデザインのカレンダーを簡単に作ることができます。月表示・週表示・日表示の切り替えも簡単に実装することができるため、便利です。（普通にプログラムを書こうと思ったらとても大変です）

また、オプションを活用すれば100種類以上のカスタマイズも可能で、Webサイトのデザインに合ったオリジナルカレンダーを手軽に作ることができます。

では、さっそく使い方を見ていきましょう。

jQueryのFullCalendarでカレンダーを表示させよう

はじめに、下記URLにアクセスし最新バージョンの「FullCalendar」をダウンロードしておきます。
（配布サイト）
https://fullcalendar.io/docs/getting-started

解凍すると、以下のようなファイル構成になっています。

ここからは、上記の中の「packages」フォルダーの中のファイルを利用していきます。
以下のように階層を作ってみてください。
※【】[]はフォルダー／-はファイル
※Sample.htmlはご自身で作成してください。

では次に、以下のようにコードを書いてみましょう。

書けましたら、さっそくSample.htmlへアクセスしていきましょう。

拍子抜けするほど簡単にカレンダーが表示できました。この記事では一番簡単なサンプルを挙げましたが、「dayGrid」以外のプラグインやCSSを追加することで、よりオリジナリティのあるカレンダーを作ることができます。

PG

グーグルカレンダーのようなカレンダーが出来上がりましたね！

PM

月表示・週表示・日表示にも対応しているのですよ。いろいろ、カスタマイズしてみると面白いと思います。

FullCalendarでサクッと綺麗にカレンダーを作ろう

今回は、jQueryのFullCalendarというプラグインについてお伝えしました。実際に作ってみてお分かりいただけたかと思いますが、短時間と高機能とデザイン性を兼ね備えているのがFullCalendarの特徴です。Webサイトにカレンダーを表示しようと考えている方は、ぜひこの機会に利用してみてください。