YAHOO.widget.CalendarGroup


(YUI version 2.2.2)

カレンダーを表示する

説明
Object =
		new YAHOO.widget.CalendarGroup(String id, String containerId, Object config);
カレンダーオブジェクトを返します。
カレンダーオブジェクトを生成し、render()メソッドを実行することにより、カレンダーの描画を行います。

レンダリング（描画）を行う場所は、通常containerIdで指定した文字列を<div>などのブロック要素で
指定したid属性にcontainerIdを指定して、表示を行います。
Object config については、こちらを参照してください。

参考
選択された日付を表示するには[selectEvent.subscribe()]を使います。
カレンダーイベントの種類を確認するには、[カレンダーイベントハンドラー]を参考にしてください。
しかし、私の環境ではIE/Firefoxブラウザに依存して値が帰ってきました。[検証結果参照]
カレンダーのプロパティを確認するには、[カレンダープロパティの種類]を参考にしてください。

サンプル
サンプルを実行(Firefox系) ソースをダウンロード(Firefox系)
サンプルを実行(IE系) ソースをダウンロード(IE系)


例１.カレンダーを表示しクリックした日付をalertで返します 
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>カレンダー</title>
</head>
<body onload="init()">
<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>
<link type="text/css" rel="stylesheet" href="calendar.css">
  <script text/javascript>
    YAHOO.namespace("example.calendar");

      function init(){
        YAHOO.example.calendar.cal1=new YAHOO.widget.CalendarGroup(
          "cal1","cal1Container", { pages:1, close:true }
            );
                YAHOO.example.calendar.cal1.selectEvent.subscribe(
                selectHandler,
                YAHOO.example.calendar.cal1,
                true
            );
            YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG",
                ["1月",
                 "2月",
                 "3月",
                 "4月",
                 "5月",
                 "6月",
                 "7月",
                 "8月",
                 "9月",
                 "10月",
                 "11月",
                 "12月"]
           );

           YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT",
                ["<font color='red'>日</font>",
                 "月",
                 "火",
                 "水",
                 "木",
                 "金",
                 "<font color='blue'>土</font>"]
           );
            YAHOO.example.calendar.cal1.render();
            YAHOO.util.Event.addListener("show1up", "load",
                YAHOO.example.calendar.cal1.show,
                YAHOO.example.calendar.cal1, true
           );

         }

        function selectHandler(){
            var wMonth={"Jan":"01",
                        "Feb":"02",
                        "Mar":"03",
                        "Apr":"04",
                        "May":"05",
                        "Jun":"06",
                        "Jul":"07",
                        "Aug":"08",
                        "Sep":"09",
                        "Oct":"10",
                        "Nov":"11",
                        "Dec":"12"
                        };
            var wDay = {"1":"01",
                        "2":"02",
                        "3":"03",
                        "4":"04",
                        "5":"05",
                        "6":"06",
                        "7":"07",
                        "8":"08",
                        "9":"09",
                        "10":"10",
                        "11":"11",
                        "12":"12",
                        "13":"13",
                        "14":"14",
                        "15":"15",
                        "16":"16",
                        "17":"17",
                        "18":"18",
                        "19":"19",
                        "20":"20",
                        "21":"21",
                        "22":"22",
                        "23":"23",
                        "24":"24",
                        "25":"25",
                        "26":"26",
                        "27":"27",
                        "28":"28",
                        "29":"29",
                        "30":"30",
                        "31":"31"
                        };
            day = YAHOO.example.calendar.cal1.getSelectedDates();
            day = day + " ";

            day = day.split(' ',10);
            yyyymmdd =
                ay[3] + "年" + wMonth[day[1]] + "月" + wDay[day[2]] + "日";
            alert(yyyymmdd);
         }
    </script>
    <div id="cal1Container"></div>
    </body>
    </html>


書籍
AJAXを使うのに、１つは欲しい書籍として、Ajaxハッカーズ・プログラミングの本がお勧めです。
結構前の出版物で、古書しかないかもしれませんが、AJAXの基本が詳しく丁寧に図解入りで
解説されています。

サンプルCDも付いてますので、ソースをコピーして自分なりに変えるだけでもとても勉強になります。
沢山のAJAX本が続々と出てる中で、この本は、いつまでも、良質のものといえると思います。

自分も、この本でAJAXを覚えました。
最近は便利なライブラリが沢山出ていて、コピペすれば動くものが多いですが、それでも
この本を読んでおけば、改造度の幅がかなり広がると思います。

関連商品