Yahoo! UI Library: Calendar

メモ:  Category:javascript

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” と指定します。

bluenote by BBB