Yahoo! UI Library: Calendar
Yahoo! UI Libraryで提供されている calendar.js を使って単純なカレンダー表示を行います。
Yahoo! UI Library: Calendarで準備するもの
calendar.jsは、いくつかのスクリプトと依存関係があります。Yahoo! UI Libraryが無い場合、 Yahoo! UI Libraryからダウンロードします。
依存関係のあるスクリプトは、次のスクリプトです。
- YAHOO.js(Namespace)
- dom.js
- event.js
カレンダーは、DOMを使ってHTMLを出力します。そのため出力先となるタグ(id)を用意する 必要があります。例えば、HTMLに次のようなタグを用意します。
<div id="bn_calendar"></div>
単純なカレンダーを作成する
カレンダーを作成したいHTMLで、次のようにJavaScriptを参照するよう定義します。(buildフォルダ)
<!-- Namespace source file -->
<script type="text/javascript" src = "YAHOO.js"></script>
<!-- Dependency source files -->
<script type="text/javascript" src = "dom.js"></script>
<script type="text/javascript" src = "event.js"></script>
<!-- Calendar source file -->
<script type="text/javascript" src = "calendar.js"></script>
Yahoo! UI Libraryで提供されているcalendarオブジェクトのインスタンスを作成します。ここで指定する第二引数は、 子要素としてカレンダーを追加するタグのidを指定します。
var cal1;
cal1 = new YAHOO.widget.Calendar("cal1","bn_calendar");
cal1.render();
render()メソッドでカレンダーが表示されます。
第一引数に指定した文字列は、カレンダーとして生成されるテーブルのid属性に使用されます。
カレンダーの初期表示月を指定する
カレンダーに初期表示する月を指定するには、Calendarのインスタンスを作成する時に表示したい月を指定します。
var cal1;
cal1 = new YAHOO.widget.Calendar("cal1","bn_calendar","05/2006");
cal1.render();
第三引数に指定する形式は、MM/YYYYになります。
初期表示時に日付を選択状態にする
カレンダーが表示された時、指定した日付を選択状態(マークを付ける)には、次のように 選択したい日付を第四引数に指定します。
var cal1;
cal1 = new YAHOO.widget.Calendar("cal1","bn_calendar","05/2006","05/03/2006");
cal1.render();
日付は「,」カンマで区切って複数指定することができます。範囲を指定する場合、“05/03/2006-05/06/2006” と指定します。