こんにちはSI部の加藤(祐)です。
社内プロジェクトでgoogleカレンダーのようなカレンダーを使ったUI画面に予定を登録できる画面の作成を行いました。その際に使ったjQuery カレンダープラグイン「fullcalendar」というものを使ったので紹介させていただきます。
初めに
fullecalendarを使うとカレンダーを使ったUI画面を簡単に作ることができるだけでなく、提供されているオプションを使うことで自分独自のデザインやカスタマイズを行えます。
また、googleカレンダーとの連携を行うライブラリも提供されている為、googleカレンダーで登録した予定の取り込み等も容易に行うことができます。
今回はjQuery カレンダープラグイン「fullcalendar」 の導入から日本語化などのオプションについて簡単に説明を行っていきます。
fullcalendarの取得
以下のサイトからfullcalendarのプラグイン「fullcalendar-1.6.4.zipを取得します。
http://arshaw.com/fullcalendar/download/
解凍すると以下のようなディレクトリー構成になっています。
・demosディレクトリ
fullcalendarを使ったサンプルが入っています
・fullcalendar
fullcalendarの本体となるjsファイル、cssファイルが格納されています。
・lib
jQuery本体のjsファイルが格納されています。
fullcalendarの作成
ディレクトリ構成に指定はありませんが今回は
取得したfullcalendarのプラグインを以下のように配置します。
fulldcalendardemoの直下に「sample.html」を作成します。
<head>タグにjsファイルとcssファイルを取り込みます。
fullcalendarを読みこむscriptをhead内に記述
<body>タグ内のfullcalendarを挿入したい箇所にID属性を追加
以上のでfullcalendarの基本設定は終了です。
「sample.html」を実行すると以下のカレンダーが表示されます。
fullcalendarのオプション説明
fullcalendarでは表示に関する様々なオプションが用意されています。
そのデフォルトで指定されているオプションをオーバーライドすることにより表記を変更することが可能となっています。
ここでは、よく使うオプションの簡単な説明を行っていきます。
提供されている部品
fullcalendarでカレンダーの移動やタイトルの表示などが容易にできるように以下の部品が提供されています。
以下の部品を他のオプションと組み合わせてカレンダー画面をカスタマイズしていきます。
title : 表示しているカレンダーのタイトルを表記します
prev : 現在表記しているカレンダーを一つ前に移動するボタンを出します
next : 現在表記しているカレンダーを一つ後に移動移動するボタンを出します
prevYear : 現在表記しているカレンダーを１年前に移動するボタンを出します
nextYear : 現在表記しているカレンダーを１年後に移動するボタンを出します
today : 現在の日付に移動するボタンを出します
month : カレンダーを月表記に変更するボタンを出します
basicWeek : カレンダーを週表記（時間表記なし）に変更するボタンを出します
basicDay : カレンダーを日表記（時間表記なし）に変更するボタンを出します
agendaWeek : カレンダーを週表記（時間表記あり）に変更するボタンを出します
agendaDay : カレンダーを週表記（時間表記あり）に変更するボタンを出します
表記に関するオプション
header：カレンダー表記のヘッダーの左右、中央にfullcalendarで提供されている部品の表示方法を指定できます。
buttonText：ボタンの文字列を指定できます。
titleFormat：タイトルの書式を指定することができます。
columnFormat：列の書式を指定することができます。
monthNames：月の名称について設定することができます。
dayNames：曜日名称について設定することができます。
dayNamesShort：曜日略称について設定することができます。
timeFormat：時間の書式ついて設定できます。
初期表示に関するオプション
firstDay：表示を開始する曜日を指定できます。(数値指定 1が月曜日)
weekends：土曜、日曜を表記するか指定できます。
defaultView：初期表示する形式(月、週、日)を指定することができます
year：初期に表示する年を指定することができます。
month：初期に表示する月を指定することができます。
day：初期に表示する日を指定することができます。
firstHour：時間表記の初期値を設定できます。
minTime：週表示時の時間、表示開始時間を指定できます。
maxTime：週表示時の時間、表示終了時間を指定できます。
上記オプションを指定すると以下のような画面にカスタマイズすることをできます。
記述内容
カレンダー画面月表示
カレンダー画面週表示
カレンダー日表示
最後に
今回は表記の設定までと簡単な導入部分を紹介させていただきました。次回はcssを使ったデザインの指定やgoogleカレンダーとの連携やイベント登録などもう少し突っ込んだ内容を紹介していきたいと思います。
ご一読頂き有り難うございました。
