【Calendar.js】jQueryでカレンダー表示を簡単にする方法

こんにちは、ハル@haru_elpisです。

jQueryでカレンダーを導入したい時に使える「Fullcalendar」の紹介です。

jQuery　Fullcalendarの使い方

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

ダウンロード

Getting Started - Docs | FullCalendar

How to initialize a calendar

fullcalendar.io

ダウンロードした「fullcalender.min.js」・「fullcalender.min.css」・「moment.min.js」・「jquery-ui.custom.min.js」・「ja.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<script src='fullcalendar/dist/locale/ja.js'></script>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

HTML

<div id="calendar"></div>

jQuery

<script>
  $('#calendar').fullCalendar();
</script>

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