GCalHolidaysにbeforeShowイベントを追加する

jQUeryUIのDatepickerに休日の表示を追加するGCalHolidays。業務用アプリの作成で大変お世話になっています。このGCalHolidaysはDatepickerのbeforeShowイベントを利用してカレンダーに休日の情報を上書きしています。

休日の表示だけでも便利ですが、さらにスケジュールや予約の状況に応じて表示を変えたいなどの要望もあるのではないでしょうか？
今回は予約がある日は太文字と下線で装飾する方法を考えてみました。

GCalHolidays.reservationという機能を追加しています。ここではajaxでサーバー側から予約のある日付を取得しています。
カレンダーの表記に合わせてゼロ無しの日付を取得します。

var GCalHolidays = {
    /** jQuery UI Datepicker用のstyle（Themeに合わせてお好みで） */
    datepickerStyles: {
        sunday: "background-image:none; background-color:#f56954 ; color: #fff", //日曜日
        saturday: "background-image:none; background-color:#3c8dbc ; color: #fff", //土曜日
        holiday: "background-image:none; background-color:#f56954 ; color: #fff",  //祝日
        rsv: "text-decoration: underline; font-weight: bold;" // 予約があるときに適用する太字と下線
    }
};

/** GCalHolidays.datepickerの次辺りに適当に追加 **/
GCalHolidays.reservation = function (year, month, inst) {
    setTimeout(function () {
        $.ajax({
            type: 'POST',
            url: '',
            cache: false,
            data: {'year': year, 'month': month},
            dataType: 'json',
            success: function (res) {
                $.each(res, function (i, value) {
                    $('.ui-state-default ').each(function () {
                        if ($(this).html() == value.d) {
                            $(this).addClass('gcal-rsv');
                            return false;
                        }
                    });
                });
            },
        });
    }, 1);
};

/**
 *  jQuery UI Datepickerが有効な場合はイベントハンドラとstyleをセットする
 */
if (window.$ && $.datepicker && $.datepicker.setDefaults) {
    $.datepicker.setDefaults({
        beforeShow: function (input, inst) {
            var date = $(input).datepicker("getDate") || new Date();
            GCalHolidays.datepicker(date.getFullYear(), date.getMonth() + 1, inst);
            GCalHolidays.reservation(date.getFullYear(), date.getMonth() + 1, inst); // 予約に対する処理を追加
        },
        beforeShowDay: function (date) { //土日のclass属性
            return [true, {0: "gcal-sunday", 6: "gcal-saturday"}[date.getDay()] || ""];
        },
        onChangeMonthYear: function (year, month, inst) {
            GCalHolidays.datepicker(year, month, inst);
            GCalHolidays.reservation(year, month); // 予約に対する処理を追加
        }
    });

    $(function () {  //ページ表示後に土日・祝日用のstyleをセット
        var styles = GCalHolidays.datepickerStyles;
        var css = "";
        css += ".gcal-sunday   .ui-state-default { " + styles.sunday + " } ";
        css += ".gcal-saturday .ui-state-default { " + styles.saturday + " } ";
        css += ".ui-widget-content .gcal-holiday { " + styles.holiday + " } ";
        css += ".ui-widget-content .gcal-rsv { " + styles.rsv + " } "; // 予約があったときのclass
        $("head").append($('<style type="text/css">' + css + "</style>"));
    });
}