YAHOO.widget.CalendarGroup
(YUI version 2.2.2)
カレンダーを表示する
説明
Object =
new YAHOO.widget.CalendarGroup(String id, String containerId, Object config);
カレンダーオブジェクトを返します。
カレンダーオブジェクトを生成し、render()メソッドを実行することにより、カレンダーの描画を行います。
レンダリング（描画）を行う場所は、通常containerIdで指定した文字列を<div>などのブロック要素で
指定したid属性にcontainerIdを指定して、表示を行います。
Object config については、
こちらを参照してください。
参考
選択された日付を表示するには
[selectEvent.subscribe()]を使います。
カレンダーイベントの種類を確認するには、
[カレンダーイベントハンドラー]を参考にしてください。
しかし、私の環境ではIE/Firefoxブラウザに依存して値が帰ってきました。
[検証結果参照]
カレンダーのプロパティを確認するには、
[カレンダープロパティの種類]を参考にしてください。
サンプル
例１.カレンダーを表示しクリックした日付をalertで返します
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>カレンダー</title>
</head>
<body onload="init()">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="dom.js" ></script>
<script type="text/javascript" src="calendar.js"></script>
<link type="text/css" rel="stylesheet" href="calendar.css">
<script text/javascript>
YAHOO.namespace("example.calendar");
function init(){
YAHOO.example.calendar.cal1=new YAHOO.widget.CalendarGroup(
"cal1","cal1Container", { pages:1, close:true }
);
YAHOO.example.calendar.cal1.selectEvent.subscribe(
selectHandler,
YAHOO.example.calendar.cal1,
true
);
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG",
["1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"]
);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT",
["<font color='red'>日</font>",
"月",
"火",
"水",
"木",
"金",
"<font color='blue'>土</font>"]
);
YAHOO.example.calendar.cal1.render();
YAHOO.util.Event.addListener("show1up", "load",
YAHOO.example.calendar.cal1.show,
YAHOO.example.calendar.cal1, true
);
}
function selectHandler(){
var wMonth={"Jan":"01",
"Feb":"02",
"Mar":"03",
"Apr":"04",
"May":"05",
"Jun":"06",
"Jul":"07",
"Aug":"08",
"Sep":"09",
"Oct":"10",
"Nov":"11",
"Dec":"12"
};
var wDay = {"1":"01",
"2":"02",
"3":"03",
"4":"04",
"5":"05",
"6":"06",
"7":"07",
"8":"08",
"9":"09",
"10":"10",
"11":"11",
"12":"12",
"13":"13",
"14":"14",
"15":"15",
"16":"16",
"17":"17",
"18":"18",
"19":"19",
"20":"20",
"21":"21",
"22":"22",
"23":"23",
"24":"24",
"25":"25",
"26":"26",
"27":"27",
"28":"28",
"29":"29",
"30":"30",
"31":"31"
};
day = YAHOO.example.calendar.cal1.getSelectedDates();
day = day + " ";
day = day.split(' ',10);
yyyymmdd =
ay[3] + "年" + wMonth[day[1]] + "月" + wDay[day[2]] + "日";
alert(yyyymmdd);
}
</script>
<div id="cal1Container"></div>
</body>
</html>