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を使ってサイトにカレンダーを表示させてみよう！」はいかがでしたか？
株式会社プレスマンでは、
WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。
まずは募集職種をご覧の上、お気軽にお問い合わせください。
あなたとお会いできるのを楽しみにしています。