YUIでカレンダー

Javascript

自身のプロジェクトでもYUIのカレンダーを利用しています。といっても先輩が設定してくれたので使い方はよく分かっておりませんでした。というわけで勉強勉強。ポップアップ式のカレンダーの作成です。

宣言

カレンダーを使うにはいくつかのjsファイルとcssファイルが必要です。headタグ内をご参照あれ。

準備その１

ボタンをクリックするとポップアップ式のカレンダーを表示するようにしたい。まず準備するのは、当然ボタン。そしてカレンダーが展開されるためのdivタグ。
ただしボタンがクリックされるまでは非表示にしておかないといけないので、headタグ内に自分でスタイルを定義している。「display:none」ってのがミソ。しかしなんでやってくれないんだろう。。

準備その２

こっからYUIライブラリを利用する。まずはネームスペースの宣言から。この宣言はお決まりみたい。名称は任意です。
次にinit関数の定義をする。初期化処理です。カレンダーインスタンスの生成処理をしています。
で、イベントリスナーへの登録。idが「showCalendar」の要素が「click」された時に「YAHOO.example.calendar.cal1.show」関数を実行する、となる。ちなみにshow関数は以下のようになっています。

YAHOO.widget.Calendar.prototype.show = function() {
	this.oDomContainer.style.display = "block";
};

つまり、「display:none」で非表示にしておいたものを表示状態にするってことですね。


これだけでポップアップ式のカレンダーが利用可能です。便利ですねぇ。

<html>
<head>
    <link href="assets/skins/sam/calendar.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="yahoo.js"></script>
    <script type="text/javascript" src="event.js"></script>
    <script type="text/javascript" src="dom.js"></script>
    <script type="text/javascript" src="calendar.js"></script>
    <style type="text/css">
      #callContainer {
          display:none;
          position:absolute;
          left:10px;
          top:20px;
      }
    </style>
</head>
<body class="yui-skin-sam">
    <button id="showCalendar">カレンダー</button>
    <div id="callContainer"></div>

    <script type="text/javascript">
        YAHOO.namespace("example.calendar");

        YAHOO.example.calendar.init = function() {
            YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","callContainer", {title:"カレンダー", close:true});
            YAHOO.example.calendar.cal1.render();
	    YAHOO.util.Event.addListener("showCalendar", "click", YAHOO.example.calendar.cal1.show, YAHOO.example.calendar.cal1, true);
        }
        YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
    </script>
</body>
</html>