Yahoo! UI Libraryで提供されているcalendar.jsを使って単純なカレンダー表示を行います。
calendar.jsは、いくつかのスクリプトと依存関係があります。Yahoo! UI Libraryが無い場合、 Yahoo! UI Libraryからダウンロードします。
依存関係のあるスクリプトは、次のスクリプトです。
カレンダーは、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" と指定します。
Copyright 1997-2010 BBB All rights reserved.