Yahoo UI Libraryには高機能なカレンダーが用意されています。まず、簡単なカレンダーを表示させてみましょう。
カレンダーを表示するためには表示するための場所を用意しておく必要があります。これは<div>タグで用意しID名を割り当てておきます。
Yahoo UI Libraryのカレンダーはnew YAHOO.widget.Calendar()を使って生成することができます。パラメータには表示先のID名を指定します。new YAHOO.widget.Calendar()は生成されたカレンダーオブジェクトを返します。このカレンダーオブジェクトのrender()メソッドを呼び出すと、初めてページ上にカレンダーが表示されます。new YAHOO.widget.Calendar()だけではカレンダーはページ上には生成されない点には注意が必要です。
実際のサンプルは以下のようになります（
サンプル01を実行する）。
【サンプル】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/calendar/assets/skins/sam/calendar.css">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/calendar/calendar-min.js"></script>
<script type="text/javascript"><!--
function displayCalendar(){
var myCalendar = new YAHOO.widget.Calendar("calendarArea");
myCalendar.render();
}
// --></script>
</head>
<body class="yui-skin-sam">
<h1>カレンダーを表示します</h1>
<form>
<input type="button" value="カレンダーを表示" onClick="displayCalendar()">
</form>
<div id="calendarArea"></div>
</body>
</html>
一度だけカレンダーを生成し表示するのであれば上記のサンプルでも問題ありません。しかし、実際にはそんな使い方をすることは非常に少なく、何かの動作でカレンダーを表示したり消したりすることが多いはずです。
Yahoo UI Libraryのカレンダーは単純に指定したタグ内に文字を追加しているだけですのでinnerHTMLに空文字を入れれば消すことができます。また、自動的にスタイルシートも設定されるので、これもclassName属性を空にすることで綺麗に消すことができます。
実際のサンプルは以下のようになります（サンプル02を実行する）。
【サンプル02】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/calendar/assets/skins/sam/calendar.css">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/calendar/calendar-min.js"></script>
<script type="text/javascript"><!--
function displayCalendar(){
var myCalendar = new YAHOO.widget.Calendar("calendarArea");
myCalendar.render();
}
function clearCalendar(){
YAHOO.util.Dom.get("calendarArea").innerHTML = "";
YAHOO.util.Dom.get("calendarArea").className = "";
}
// --></script>
</head>
<body class="yui-skin-sam">
<h1>カレンダーを表示します</h1>
<form>
<input type="button" value="カレンダーを表示" onClick="displayCalendar()">
<input type="button" value="カレンダーを消す" onClick="clearCalendar()">
</form>
<div id="calendarArea"></div>
</body>
</html>
毎回、カレンダーを生成し内容を消すという方法以外に生成は一度だけにして、後はスタイルシートのdisplayプロパティを操作し表示／非表示を切り替える方法もあります。
実際のサンプルは以下のようになります（サンプル03を実行する）。
【サンプル03】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/calendar/assets/skins/sam/calendar.css">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/calendar/calendar-min.js"></script>
<script type="text/javascript"><!--
YAHOO.util.Event.addListener(window, "load", function(){
var myCalendar = new YAHOO.widget.Calendar("calendarArea");
myCalendar.render();
YAHOO.util.Dom.get("calendarArea").style.display = "none";
});
function displayCalendar(){
YAHOO.util.Dom.get("calendarArea").style.display = "block";
}
function clearCalendar(){
YAHOO.util.Dom.get("calendarArea").style.display = "none";
}
// --></script>
</head>
<body class="yui-skin-sam">
<h1>カレンダーを表示します</h1>
<form>
<input type="button" value="カレンダーを表示" onClick="displayCalendar()">
<input type="button" value="カレンダーを消す" onClick="clearCalendar()">
</form>
<div id="calendarArea"></div>
</body>
</html>
[
目次へ]