Yahoo! User Interface Libraryを使ってカレンダー作成
2007.03.01 Author: えす
今回は、Yahoo! User Interface Library（YUI）を使ってカレンダーを作成する方法を紹介します。
まずYUIの入手ですが、http://developer.yahoo.com/yui/から入手できます。 ダウンロード後、解凍すると「build(ライブラリ集)」、「examples（サンプル集）」、「docs（マニュアル類）」の3ディレクトリが入っています。 Yahoo! User Interface Libraryではカレンダーのほかにも、ツリー表示、オートコンプリートなどのライブラリがあります。
今回はカレンダーを作成するのみなので、build内のcalendarを使います。
calendarディレクトリを開くと「assets」ディレクトリ、「calendar.js」、「calendar-min.js」が入っています。それぞれの構成は
| ・assets | カレンダー表示に使用するcss、画像 |
| ・calendar.js | ライブラリ本体 |
| ・calendar-min.js | calendar.jsのコメント、改行を削除したもの |
通常はcalendar.jsを使えばいいと思いますが、動作を早くしたいのであれば、calendar-min.jsを使うといいです。
実装についてですが、まずYUIの必要なライブラリを設置します。
カレンダー作成で必要になるものは下記のファイルです。
・yahoo.js
・dom.js
・event.js
・calendar.js
・calendar.css
・カレンダーに使用する画像
カレンダー表示ページのソースはこんな感じです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script language="JavaScript" type="text/javascript"
src="js/yui/build/yahoo/yahoo.js"></script>
<script language="JavaScript" type="text/javascript"
src="js/yui/build/dom/dom.js"></script>
<script language="JavaScript" type="text/javascript"
src="js/yui/build/event/event.js"></script>
<script language="JavaScript" type="text/javascript"
src="js/yui/build/calendar/calendar.js"></script>
<link rel="stylesheet" type="text/css"
href="js/yui/build/calendar/assets/calendar.css"
media="print, screen, tv" />
<title>カレンダー</title>
<script type="text/javascript">
<!--
function displayCalendar() {
cal = new YAHOO.widget.Calendar("cal","calendar");
cal.render();
}
//-->
</script>
</head>
<body onLoad="displayCalendar()">
<div id="calendar"></div>
</body>
</html>
上記のソースだけで、DIVにカレンダーが表示されます。
カレンダーを表示するにはYAHOO.widget.Calendar()を使用し、第1引数にはカレンダーテーブルのID名、第2引数には表示するDIVのID名を
記述してください。また、第3引数でconfigの設定ができます。
作成したオブジェクトのrender()を実行することで、カレンダーが表示されます。
ということで、非常に簡単にカレンダーを表示することができます。
さらにいろいろ付け加えてみました。
<script type="text/javascript">
<!--
function displayCalendar() {
if (document.getElementById('calendar').style.display
== "block") {
document.getElementById('calendar').style.display =
"none";
} else {
now = new Date();// 選択できる最小日付
var set_option = {mindate:"01/01/2007",
// 選択できる最大日付
maxdate:"05/31/2007",
// 月の表示フォーマット選択
LOCALE_MONTHS:"short"};cal = new YAHOO.widget.Calendar("cal",
"calendar",
set_option);
cal.cfg.setProperty("MONTHS_SHORT",
["01", "02", "03", "04", "05", "06",
"07", "08", "09", "10", "11", "12"]);
cal.cfg.setProperty("WEEKDAYS_SHORT",
["<font color='red'>日</font>",
"月", "火", "水", "木", "金",
"<font color='blue'>土</font>"]);var selectedYmd = function(type, args, obj) {
document.getElementById("selected_ymd").value = args;
};cal.selectEvent.subscribe(selectedYmd, cal, true);
document.getElementById('calendar').style.display =
"block";
cal.render();
}
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="index.html">
<input type="text" id="selected_ymd"><br>
<input type="button" value="カレンダー表示" onClick="displayCalendar()">
</form>
<div id="calendar"></div>
</body>
set_optionにconfig設定を記述し、YAHOO.widget.Calendar()の第3引数でset_optionを設定します。
上記で設定している以外にも、設定できる項目があります。
| pagedate:"MM/YYYY" | 最初に表示される年月 |
| selected:"MM/DD/YYYY-MM/DD/YYYY" | 最初から選択されている状態にする |
| title:"カレンダー" | カレンダーのタイトル表示 |
| close:true | 右上に閉じるボタン表示 |
| MULTI_SELECT:true | 日付の複数選択許可 |
上記以外にも設定できる項目があります。(今回は省略します)
また、cfg.setPropertyで初期値を変更することができます。
selectEvent.subscribe(function_name, object_name, flg)で選択された日付を指定した関数へ渡すことができます。
calendar.cssでカレンダーのデザインを変更することもできますし、calendar.jsのhtml[html.length]に出力するhtmlを格納していますので、これを変更することで要素の配置を変えることもできます。
という具合で、カレンダーを非常に短時間で作ることができてしまいます。
開発効率を高めたい方は、ぜひ使ってみてください。
