YUIのカレンダーでは、表示する際に特定の年月をあらかじめ指定したり、特定の日を選択させておいたりできます。
カレンダーに表示する年月を設定するには、YAHOO.widget.Calendar()の3番目のオプションにpagedateを指定します。設定する文字列は"月/年"の形式になります。例えば以下のようにすると、1969年の2月がデフォルトで表示されるようになります。
pagedate:"2/1969"
特定の日付を選択しておくにはYAHOO.widget.Calendar()の3番目のオプションにselectedを指定します。設定する文字列は"月/日/年"の形式になります。例えば以下のように指定すると2007年の12月24日が選択されます(サンプル06)。
selected:"12/24/2007"
 |
サンプル06の実行結果。デフォルト日付の設定 |
複数の日付を選択
選択しておきたい日付が複数ある場合には,(カンマ)で区切って列記することができます。以下のように指定すると、2007年12月24日、2007年12月25日、2008年1月1日の3日が選択されます。
selected:"12/24/2007, 12/25/2007, 1/1/2008"
 |
複数の日付を選択 |
特定の範囲の日付を指定
特定の範囲の日付を指定するには-(ハイフン/マイナス)を使います。以下のように指定すると2007年12月24日から2008年1月7日までが選択されます。
selected:"12/24/2007-1/7/2008"
 |
カレンダーの期間の設定 |
範囲と個別に日付を選択
範囲と個別に日付を選択しておくには,(カンマ)と-(ハイフン/マイナス)を併記します。以下のように指定すると2007年12月24日から2008年1月7日までの日付と2007年12月3日が選択されます。
selected:"12/3/2007, 12/24/2007-1/7/2008"
 |
範囲と個別の両方を表示 |
サンプル06
<!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"><!--
window.onload = function() {
var selRange = { close:true,
pagedate:"12/2007",
selected:"12/24/2007" };
var calObj = new YAHOO.widget.Calendar("calObj","calendarContainer", selRange);
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.render();
}
function checkDate(type,args,obj){
var d = args.toString().split(",");
YAHOO.util.Dom.get("sDate").value = d[0]+"年"+d[1]+"月"+d[2]+"日";
}
// --></script>
</head>
<body>
<h1>YUIカレンダーサンプル(デフォルトの日付設定)</h1>
<form>
<input type="text" id="sDate" value="">
</form>
<div id="calendarContainer"></div>
</body>
</html>
選択可能な範囲を指定する
カレンダーを表示した際にあらかじめ選択しておくのではなく、選択可能な範囲を指定するにとどめるということも可能です。この場合は、選択できる開始年月日をmindate、最終年月日をmaxdateで指定します。指定する日付の形式は月/日/年になります。mindate、maxdateもYAHOO.widget.Calendar()の3番目のオプションに指定します。以下のように指定するとクリックして選択できる範囲が2007年7月21日から2007年8月31日までになります(サンプル07)。
mindate:"7/21/2007", maxdate:"8/31/2007"
 |
 |
選択可能な範囲(2007年7月21日から2007年8月31日まで)がブルーで表示される |
|
サンプル07
<!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"><!--
window.onload = function() {
var dateRange = { mindate:"7/21/2007", maxdate:"8/31/2007", close:true };
var calObj = new YAHOO.widget.Calendar("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.render();
}
function checkDate(type,args,obj){
var d = args.toString().split(",");
YAHOO.util.Dom.get("sDate").value = d[0]+"年"+d[1]+"月"+d[2]+"日";
}
// --></script>
</head>
<body>
<h1>YUIカレンダーサンプル(範囲指定)</h1>
<form>
<input type="text" id="sDate" value="">
</form>
<div id="calendarContainer"></div>
</body>
</html>
