YUIのカレンダーは2ヵ月分をまとめて表示することができます。古いバージョンでは、2ヵ月分のカレンダー表示にはYAHOO.widget.Calendar2up()を利用していましたが、バージョン2.3.1ではYAHOO.widget.CalendarGroup()のように名前が変わっています。パラメータは同じなので名前だけを変更すれば対処できます。単月しか表示しないカレンダーも2ヵ月分表示するカレンダーも表示に関する手順やパラメータは同じです。このため、単月のカレンダーを2ヵ月分のカレンダーとして表示するにはYAHOO.widget.Calendarの名前をYAHOO.widget.CalendarGroupにするだけです。サンプル09は2ヵ月分のカレンダーを表示するものです。
 |
サンプル09の実行結果。2ヵ月分のカレンダー表示 |
サンプル09
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>YUIカレンダーサンプル</title>
<link rel="stylesheet" type="text/css" href="css/calendar.css">
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript"><!--
var calObj;
window.onload = function() {
var dateRange = { mindate:"7/21/2007", maxdate:"8/31/2007",
MULTI_SELECT : true, close:true
};
calObj = new YAHOO.widget.CalendarGroup("calObj","calendarContainer", dateRange);
calObj.cfg.setProperty("MONTHS_SHORT", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
calObj.cfg.setProperty("MONTHS_LONG", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
calObj.cfg.setProperty("WEEKDAYS_1CHAR", ["日", "月", "火", "水", "木", "金", "土"]);
calObj.cfg.setProperty("WEEKDAYS_SHORT", ["日", "月", "火", "水", "木", "金", "土"]);
calObj.cfg.setProperty("WEEKDAYS_MEDIUM",["日", "月", "火", "水", "木", "金", "土"]);
calObj.cfg.setProperty("WEEKDAYS_LONG", ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]);
calObj.cfg.setProperty("MY_YEAR_POSITION", 1);
calObj.cfg.setProperty("MY_MONTH_POSITION", 2);
calObj.cfg.setProperty("MDY_YEAR_POSITION", 1);
calObj.cfg.setProperty("MDY_MONTH_POSITION", 2);
calObj.cfg.setProperty("MDY_DAY_POSITION", 3);
calObj.selectEvent.subscribe(checkDate, calObj, true);
calObj.deselectEvent.subscribe(checkDate, calObj, true);
calObj.render();
}
function checkDate(type,args,obj){
var selList = calObj.getSelectedDates();
var dateList = "";
for (var i=0; i<selList.length; i++) {
var d = selList[i];
dateList += d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日, ";
}
YAHOO.util.Dom.get("sDate").value = dateList;
}
// --></script>
</head>
<body>
<h1>YUIカレンダーサンプル(2カ月分表示)</h1>
<form>
<input type="text" id="sDate" value="" size="80">
</form>
<div id="calendarContainer"></div>
</body>
</html>
