めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

YUI2（ Yahoo! User Interface Library）のCalendar（カレンダー）（1）

JavaScript

JavaScriptのライブラリーを今年になって、色々と試している気がします。
2年ぐらい前に、やっておけよ、自分と思ったり、思わなかったり。
それはそれとして、YUI2（ Yahoo! User Interface Library）を試してみました（最新はYUI3です）。YUI2のCalendar（カレンダー）なんですが、調べてみると期間設定があるんです。これってかなり便利だと思うんですが、誰でも知っている事なのかも...と思って不安になったりしました。

画面

ソース

<html>
<head>
<title>YUI Calendar</title>
<script type="text/javascript" charset="UTF-8" src="../lib/prototype.js"></script>
<script type="text/javascript" src="./yahoo-min.js"></script>
<script type="text/javascript" src="./dom-min.js"></script>
<script type="text/javascript" src="./event-min.js"></script>
<script type="text/javascript" src="./calendar-min.js"></script>
<link   rel="stylesheet" type="text/css" href="./assets/calendar.css" />
<script type="text/javascript">
window.onload = function(){
	var options = {
		pages : 2,
		selected : '10/01/2009-11/10/2009'
	};
	var cal1 = new YAHOO.widget.CalendarGroup(
	    "cal1",          /* ID名 */
	    "cal1Container", /* element名 */
	    options
	);
	// YYYY/mm/dd
	cal1.cfg.setProperty("MDY_YEAR_POSITION", 1);
	cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
	cal1.cfg.setProperty("MDY_DAY_POSITION", 3);

	// 日本語
    cal1.cfg.setProperty("WEEKDAYS_SHORT", [
        "<font color='red'>日</font>",
        "月",
        "火",
        "水",
        "木",
        "金",
        "<font color='blue'>土</font>"
    ]);

	// 日本語
    cal1.cfg.setProperty("MONTHS_LONG", [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
    ]);

	// イベント
	cal1.selectEvent.subscribe(checkDate, cal1, true);
	cal1.render();
};

function checkDate(type,args,obj) {
	alert(args);
	$('fromDate').innerHTML = args[0];
}
</script>
</head>
<body>

<h1>YUI Calendar</h1>
<p>YUIのカレンダーテストです</p>
<p>選択した日：<span id="fromDate"></span></p>
<div id="cal1Container"></div>
</body>
</html>