「カレンダー」は、日付をループ処理して、1つ1つ描画することで、自分で作ることもできます。
 しかし、「何曜日から始まるのか」「末尾は28~31のどの日なのか」などを計算しなければならず、不具合が出やすいものです。
 さらに、「Googleカレンダー」のように「スケジュールのタイムライン」も一緒に表示しようとすると、作り込みは大変です。

 今回紹介する「FullCalendar」は、それらの実装を簡単にする「カレンダーライブラリ」です。
 「月表示」のほか、「週表示」や「日表示」にも対応します。「Googleカレンダー」との連携機能もあります。

■大澤 文孝

http://www.amazon.co.jp/dp/477751952X

【今月紹介するライブラリ】

FullCalendar:http://fullcalendar.io/
開発者:Adam Shaw
ライセンス:MIT Licence

「月・週・日」のカレンダーを表示

 「FullCalendar」は、「月」「週」「日」のカレンダーを表示できるライブラリです。

 「jQuery」(http://jquery.com/)のほか、多言語の日付処理ライブラリの「Moment.js」(http://momentjs.com/)を前提としています。
 これらのライブラリは、ダウンロードできるアーカイブに含まれています。

■ 基本的な使い方

 基本的な使い方は、リスト1の通りです。
 カレンダーを表示したい場所は、

のように、何かしらかの「div要素」として用意しておきます。
 そうしておいて、初期化の際に、

とすると、その要素がカレンダー化されます(図1)。

※ここではlangオプションに「ja」を指定することで日本語化していますが、この設定だと、一部の表示が不自然です(たとえば週表示において、「4月18日(月)」は「月 4/18」と表示される)。より細かく調整したいなら、titleFormat、columnFormnat、monthNames、monthNamesShort、dayNames、dayNamesShortのオプションを設定してください。

図1 基本的なカレンダー

図1 基本的なカレンダー

■ カレンダーを切り替える

 「FullCalendar」は、次の5種類のカレンダーに対応しています。


・月表示(month)
・週表示(basicWeek)
・日表示(basicDay)
・予定時刻付き週表示(agendaWeek)
・予定時刻付き日表示(agendaDay)


 デフォルトは「月表示」です。これらの表示はボタンで切り替えられますが、デフォルトでは「切り替えボタン」が表示されていません。
 「切り替えボタン」を表示するには、「header」オプションを指定します。

 たとえば、

のようにすると、右上に「月」「週」「日」のボタンが付き、「月表示」「予定時刻付き週表示」「予定時刻付き日表示」に切り替えられます。
 たとえば、「予定時刻付き週表示」に切り替えると、図2のようになります。

図2 予定時刻付き週表示

図2 予定時刻付き週表示