kotaziです。
FullCalendarの基本的な使い方です。
Basic Usage
Webページにカレンダーを組み込む最初のステップは、正しいJSとCSSファイルを用意することです。
FullCalendarのスタイルシート、FullCalendar、jQuery、Momentファイルを<head>に含めたことを確認してください。
<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>
jQueryとMomentは必ずFullCalendarのJSファイルより先に読み込んでください。
もしドラッグやリサイズをするのであれば、追加する必要のあるライブラリがあるかもしれないので、こちらを見てください。
依存関係を書き終えたら、カレンダーを初期化するためのスクリプトを記述します。
このコードはページの初期化後に実行される必要があります。最も良い方法はjQueryの$(document).readyあたりを使うことです。
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
上記のコードは<script>タグで囲んでください。
ページ内のIDcalendar要素の中にカレンダーを生成します。
<div id='calendar'></div>
これで空っぽの月カレンダーが表示されると思います。
イベントの表示方法について学ぶにはGoogle CalendarもしくはEvent Dataのセクションを参考にしてください。
Options
FullCalendarのドキュメントの大半は、オプションの影響や振る舞いについてです。
オプションはこのように、たいていカレンダーの初期化時にセットされます。
$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});
Callbacks
コールバックはオプションのように並べられますが、これらの関数は特別なことが起こらなければ呼ばれません。
下記のサンプルでは、ユーザーが日にちをクリックするとアラートが表示されるものです。
$('#calendar').fullCalendar({
dayClick: function() {
alert('a day has been clicked!');
}
});
Methods
メソッドは様々な方法を提供します。
メソッドは既に初期化されたカレンダーのjQueryオブジェクトに対し、fullCalendarコマンドを買います。
$('#calendar').fullCalendar('next');
これはnextメソッドです。カレンダーを次に進めるためのメソッドです。