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

.NET開発者のためのブログメディア

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

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

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

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

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

FullCalendar実装

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

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

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

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

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

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

FullCalendarダウンロードリンク

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

FullCalendarファイル構成

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

【カレンダー】
[fullcalendar]
  [core]
    -main.css
    -main.js
  [daygrid]
    -main.css
    -main.js
-Sample.html

【カレンダー】

[fullcalendar]

[core]

-main.css

-main.js

[daygrid]

-main.css

-main.js

-Sample.html

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

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />

        <!--css/jsを読み込む-->
    <link href='fullcalendar/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
    <script src='fullcalendar/core/main.js'></script>
    <script src='fullcalendar/daygrid/main.js'></script>
  
        <!--dayGridのプラグインを取り込む-->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ]
        });
        calendar.render();
      });
    </script>
  </head>
  <body>

    <div id='calendar'></div>

  </body>
</html>

<!DOCTYPE html>

<head>

document.addEventListener('DOMContentLoaded', function() {

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

plugins: [ 'dayGrid' ]

});

calendar.render();

});

</script>

</head>

<body>

</body>

</html>

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

FullCalendar表示

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

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

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

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

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