Pages

2010年8月25日水曜日

Yahho Calendar を祝日以外の指定曜日のみクリックできないようにする

Yahho Calendar
http://0-oo.net/sbox/javascript/yahho-calendar

YUIベースで作られた祝日表示対応のこのカレンダー。
祝日以外の水曜日をクリックできないようにする方法をやってみた。

まずクリックできないようにする方法が用意されているのかがポイントだけど、それは用意された。
よかった(笑)

renderBodyCellRestricted

を利用するみたい。

var cal = new YAHOO.widget.Calendar(place, config);
cal.addRenderer("8/25", cal.renderBodyCellRestricted);

こんな感じで使うみたい。

それで結局追加したのが、

yahho-calendar.js ファイルの最後に

YahhoCal.setDisableDays = function(index) {
    $(".wd3").each(function(){
        if (!$(this).hasClass("holiday" + index)) {
            var value = $(this).children("a").text();
            $(this).children("a").remove();
            $(this).text(value);
            $(this).removeClass("selectable");
            $(this).addClass("restricted");

            // これだけでいけるはずだけどうまく動かない。。。
            var date = YahhoCal._cal.getDateByCellId($(this).attr("id"));
            var month = date.getMonth() + 1;
            var day = date.getDate();
            YahhoCal._cal.addRenderer(month + "/" + day, YahhoCal._cal.renderBodyCellRestricted);
        }
    });
}

を追加した。
で、見て解る通りrenderBodyCellRestrictedだけじゃない。。。
そうなんです、実行するタイミングが悪いのかしてrenderBodyCellRestrictedが思うように動かない。。。
で、無理やりjquery使ってclassいじっちゃいました。。。

ここまでするならrenderBodyCellRestricted無しの方がいいかも位ですね。。。

とりあえずこいつを gcalendar-holidays.js ファイルの GCalHolidays.decode 関数の最後の

//コールバック
this._userCallback(days, index);

のところに

//コールバック
this._userCallback(days, index);
YahhoCal.setDisableDays(index);

って感じで追加しました。

0 件のコメント:

コメントを投稿

Followers