FullCalendarとは

オープンソースのカスタマイズ可能なjqueryのカレンダーライブラリです。
上手く活用することで、カレンダーのスクラッチ開発をせずにリッチなカレンダーを表示できます。

※fullcalendar-3.10.0時点の導入方法を紹介しています。

※全体のソースコードは、一番下にあります。

導入手順

1. 公式GitHubからfullcalendar-3.10.0.zipをダウンロードする

https://github.com/fullcalendar/fullcalendar/releases/tag/v3.10.0

※fullcalendar-3.10.0時点の導入方法です。
最近リリースされたv4は、こちらで紹介している導入方法では、動きません。

2. ライブラリを読み込む

htmlのheadタグ内にFullCalendarを読み込む記述をする。

// 必須ファイル
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
// 日本語化ファイル
<script src='fullcalendar/locale/ja.js'></script>

※FullCalendarを日本語化するには、「ja.js」を追加で読み込む必要があります。

3. カレンダーを表示する箇所にタグを記載する。

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

4. jqueryでfullCalendarの初期処理を実行

$('#calendar-view').fullCalendar({
    // full calendarをカスタマイズする際にここにオプションを記述する。
});

たったこれだけでgoogleカレンダーのようなリッチなカレンダーを表示させることができます。
full calendarをカスタマイズするには、こちらの公式のドキュメントを参照してみてください。
https://fullcalendar.io/docs
数多くのオプションが用意されています。

全体のソースコード

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>full calendar</title>
  <!-- full calendarの読み込み -->
  <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
  <script src='fullcalendar/lib/jquery.min.js'></script>
  <script src='fullcalendar/lib/moment.min.js'></script>
  <script src='fullcalendar/fullcalendar.js'></script>
  <script src='fullcalendar/locale/ja.js'></script>
  <!-- 自分で作成したjsファイル -->
  <script src='calendar.js'></script>
</head>

<body>
  <div id='calendar-view'></div>
</body>

</html>

calendar.js

$(function () {
  $('#calendar-view').fullCalendar({
    // full calendarをカスタマイズする際にここにオプションを記述する。
  });
})

FullCalendarを使ってサイトにカレンダーを表示させてみよう！