カレンダー上をクリックして日付が選択されたら何か処理を行わせるということができます。YUIのカレンダーには以下の表のイベントが設定されています。
イベント一覧
| beforeDeselectEvent | 選択解除前 |
|---|---|
| beforeRenderEvent | 描画前 |
| beforeSelectEvent | 選択前 |
| changePageEvent | ページ(表示されている月)切り替え時 |
| clearEvent | 消去時 |
| deselectEvent | 非選択時 |
| renderEvent | 描画時 |
| resetEvent | リセット時 |
| selectEvent | 選択時 |
少し前のYUIのカレンダーのバージョンではonSelectのように一般的なJavaScriptのイベント名とイベントハンドラの設定する必要があったのですが、バージョン2.3.1では異なる方法でイベントを設定するようになっています。カレンダーにイベントを設定するには以下の書式を利用します。
calObj.eventName.subscribe(func, calObj, true);
calObj : カレンダーオブジェクト
eventName : イベント名
func : イベントハンドラ(イベント発生時に呼び出される関数など)
サンプル05では、日付が選択された時にcheckDate関数を呼び出すように設定しています。
選択された日付を求めるには、イベント発生時に呼び出される関数に渡される内容を取得し算出します。イベント発生時に関数に渡されるパラメータは3つあり、発生したイベント名、日付、イベントが発生したオブジェクトの順番に渡されます。クリックされた日付はデフォルトでは,(カンマ)区切りのデータになっています。これを分割するには一度文字列形式にした後にsplit(",")として配列に分けます。配列には年、月、日の順番に値が格納されます。サンプル05ではクリックされた日付をテキストフィールドに表示しています。
 |
サンプル05の実行結果。日付をクリックすると、テキストフィールドに表示する |
サンプル05
<!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 calObj = new YAHOO.widget.Calendar("calObj","calendarContainer", { close:true });
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>
