カレンダーには、いくつかのイベントが用意されています。
| onBeforeDeselect | 日の選択が解除される前 |
| onBeforeSelect | 日が選択される前 |
| onChangePage | 他の月が表示された |
| onClear | クリアされた |
| onDeselect | 日の選択が解除された |
| onRender | 表示が完了した |
| onReset | リセットされた |
| onSelect | 日が選択された |
手軽なところでカレンダーの表示が完了したらアラートダイアログを表示してみます。表示完了時に関数を呼び出すようにするには
カレンダーオブジェクト.onRender = 処理先関数名
と指定します。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiカレンダーサンプル（イベント処理）</title>
<link rel="stylesheet" href="calendar.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="calendar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function dispCalender()
{
calenderObj = new YAHOO.widget.Calendar("calenderObj","calender");
calenderObj.onRender = check;
calenderObj.render();
}
function check()
{
alert("描画完了");
}
// --></script>
</head>
<body>
<h1>yuiカレンダーサンプル（イベント処理）</h1>
<form>
<input type="button" value="カレンダーを表示" onClick="dispCalender()">
</form>
<div id="calender"></div>
</body>
</html>
カレンダーの日が選択された場合にはonSelect（またはonBeforeSelect）を使います。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiカレンダーサンプル（イベント処理）</title>
<link rel="stylesheet" href="calendar.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="calendar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function dispCalender()
{
calenderObj = new YAHOO.widget.Calendar("calenderObj","calender");
calenderObj.onSelect = check;
calenderObj.render();
}
function check()
{
alert("選択されました");
}
// --></script>
</head>
<body>
<h1>yuiカレンダーサンプル（イベント処理）</h1>
<p>選択するとアラートダイアログが表示されます</p>
<form>
<input type="button" value="カレンダーを表示" onClick="dispCalender()">
</form>
<div id="calender"></div>
</body>
</html>
選択が解除されたらイベントを呼び出すようにするにはonDeselect（またはonBeforeDeselect）を使います。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiカレンダーサンプル（イベント処理）</title>
<link rel="stylesheet" href="calendar.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="calendar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function dispCalender()
{
calenderObj = new YAHOO.widget.Calendar("calenderObj","calender");
calenderObj.onDeselect = check;
calenderObj.render();
}
function check()
{
alert("選択が解除されました");
}
// --></script>
</head>
<body>
<h1>yuiカレンダーサンプル（イベント処理）</h1>
<p>選択してから、その選択を解除するとアラートダイアログが表示されます</p>
<form>
<input type="button" value="カレンダーを表示" onClick="dispCalender()">
</form>
<div id="calender"></div>
</body>
</html>
現在表示されている月ではない他の月のカレンダーに切り替わるとonChangePageイベントが発生します。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiカレンダーサンプル（イベント処理）</title>
<link rel="stylesheet" href="calendar.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="calendar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function dispCalender()
{
calenderObj = new YAHOO.widget.Calendar("calenderObj","calender");
calenderObj.onChangePage = check;
calenderObj.render();
}
function check()
{
alert("ページが切り替えボタンが押されました");
}
// --></script>
</head>
<body>
<h1>yuiカレンダーサンプル（イベント処理）</h1>
<p>別の月に移動するボタンをクリックするとアラートダイアログが表示されます</p>
<form>
<input type="button" value="カレンダーを表示" onClick="dispCalender()">
</form>
<div id="calender"></div>
</body>
</html>
日が選択されたら、その日が何日なのかを取得したい場合があります。この場合にはselectedDatesプロパティを参照します。日付の範囲が指定されている場合には配列として返されます。以下のサンプルはクリックすると、クリックした日付を表示します。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiカレンダーサンプル（イベント処理）</title>
<link rel="stylesheet" href="calendar.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="calendar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function dispCalender()
{
calenderObj = new YAHOO.widget.Calendar("calenderObj","calender");
calenderObj.onSelect = check;
calenderObj.render();
}
function check()
{
alert(calenderObj.selectedDates+"が選択されました");
}
// --></script>
</head>
<body>
<h1>yuiカレンダーサンプル（イベント処理）</h1>
<p>選択した日付が表示されます</p>
<form>
<input type="button" value="カレンダーを表示" onClick="dispCalender()">
</form>
<div id="calender"></div>
</body>
</html>
[
複数の日を選択できるようにする]
[
目次へ]
(2006.2.20)