めも帖

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

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

JavaScript

もしかして...と思って、ざっくり期間設定のフォームとかできるんじゃない？と思って調べてみたら、ざっくり作れました。
forcusの制御が出来れば、期間設定のフォーム（GoogleAnalytics風）が出来そうな感じです。YUIのカレンダーってすごいなあ。

ソース（HTML）

  • ざっくりなんで、最初の日は固定にしてあります
  • prototype.jsも併用しています
<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>

<script type="text/javascript" src="./yuiCalendar.js"></script>

<link   rel="stylesheet" type="text/css" href="./assets/calendar.css" />

<script type="text/javascript">
window.onload = function(){
	Field.focus('fromDate');
	setupCalendar();
};

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

</head>
<body>

<h1>YUI Calendar</h1>
<p>YUIのカレンダーテストです</p>
<input id="fromDate" value="2009,10,1" />
<input id="toDate" value="" />
<div id="cal1Container"></div>

</body>
</html>

ソース（JavaScript/yuiCalendar.js）

function setupCalendar(fromdate, todate){
	var options = {
		pages : 2
	};

	if((fromdate) && (todate)){
		fromdate = fromdate.split(',');
		todate   = todate.split(',');
		options.selected = fromdate[1] + '/' + fromdate[2] + '/' + fromdate[0] + '-' + todate[1] + '/' + todate[2] + '/' + todate[0];
	}

	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();
}