FullCalendarとは

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

目次

  • 導入手順1. 公式からzipファイルをダウンロードする2. ライブラリを読み込む3. カレンダーを表示する箇所にタグを記載する。4. jqueryでカレンダー表示を実行する。
  • 全体のソースコードindex.htmlcalendar.js

導入手順

1. 公式からzipファイルをダウンロードする

https://fullcalendar.io/download

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でカレンダー表示を実行する。

$('#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をカスタマイズする際にここにオプションを記述する。
  });
})
この記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

東日本橋の制作・開発会社 プレスマンのスタッフブログ