hhCal.js

cal.css

/*==== calendar ==== */
.calendar_box {width:1168px;margin-bottom:20px;zoom:1;}
.calendar_box table {position:relative;float:left;width:554px;margin:0 30px 5px 0;overflow:hidden;zoom:1 ;}
.calendar_box caption {font:20px/42px "microsoft yahei";color:#24747b;}
.calendar_box caption a {display:block;height:42px;zoom:1;color:#24747b;}
.calendar_box table caption .pre,.calendar_box table caption .next {float:left;*display:inline;margin-right:-34px;width:34px;font:bold 26px/42px simsun;text-align:center;}
.calendar_box table caption .next {float:right;margin:0 0 0 -34px;}
.calendar_box table caption a:hover {background-color:#32c6c6;color:#fff;text-decoration:none;}
.calendar_box thead {border:1px solid #eee;}
.calendar_box th {width:78px;font:14px/34px "microsoft yahei";color:#999;}
.calendar_box td {width:78px;height:60px;border:1px solid #EEE;vertical-align:bottom;}
.calendar_box td a {position:relative;display:block;height:60px;}
.calendar_box td a:hover {background-color:#32c6c6;text-decoration:none;}
.calendar_box td a b {position:absolute;bottom:0;width:74px;}
.calendar_box td b {display:block;padding-right:4px;font-weight:normal;font-size:12px;color:#999;text-align:right;zoom:1;}
.calendar_box td .price {display:block;padding-left:5px;font:12px/18px arial,simsun;color:#24747b;}
.calendar_box td .price dfn {font:14px/20px tahoma;}
.calendar_box td .group {display:block;padding-left:5px;line-height:18px;color:#999;}
.calendar_box td.off b {color:#ddd;}
.calendar_box td.sp {background-position:26px -265px;background-color:#EAC971;font-size:14px;color:#574D29;text-align:center;text-shadow:1px 1px #FDDA7C;}
.calendar_box td.sp b {color:#574D29;}
.calendar_box td a:hover span,.calendar_box td a:hover b {color:#fff;}
.calendar_box .weekend {color:#2f8186;}
.calendar_box .wait_statue {display:block;font-size:14px;color:#24747B;text-align:center;}
.calendar_box .tips {margin:10px 0;color:#666;clear:both;}

hhCal.js

(function ($) {
    var defaults = {
        url: null,
        year: null,
        month: null,
        columns: 7,
        showOtherMonthDays: false,
        tmplDay: ['<td>',                              // 0:默认
                   '<td>',                              // 1:可出发
                   '<td class="off">',                  // 2:关闭
                   '<td class="sp">额满</td>',          // 3:额满
                   '<td>',                              // 4:候补
                   '<td class="sp">敬请期待</td>'],     // 5:敬请期待
        click: function () {
            alert('未实现');
        },
        selectorPre: 'a.pre',
        selectorNext: 'a.next',
        selectorTitle: '.cal-title'
    };

    $.fn.hhCal = function (options) {
        var opts = $.extend({}, defaults, options || {});

        opts.$tables = this;
        opts.init = options;
        return this.each(function (i, val) {
            var $this = $(this);
            draw($this, opts);
        });
    };

    var getCalendarModel = function (opts) {
        var r;
        $.ajax({
            url: opts.url + "?year=" + opts.year + "&month=" + opts.month,
            async: false,
            cache: false,
            dataType: "json",
            success: function (data) {
                r = data;
            }
        });
        return r;
    };

    var prevMonth = function (opts) {
        console.log(opts.init.month);
        opts.year = (opts.month == 1) ? opts.init.year - 1 : opts.init.year;
        opts.month = (opts.month == 1) ? 12 : opts.init.month - 1;
        opts.$tables.hhCal(opts);
    };
    var nextMonth = function (opts) {
        console.log(opts.init.month);
        opts.year = (opts.month == 12) ? opts.init.year + 1 : opts.init.year;
        opts.month = (opts.month == 12) ? 1 : opts.init.month + 1;
        opts.$tables.hhCal(opts);
    };

    var draw = function ($tbl, opts) {
        var calendarModel = getCalendarModel(opts);
        if (!calendarModel) return;
        var monthModel = calendarModel.MonthModel;
        if (!monthModel) return;

        $tbl.find(opts.selectorPre).unbind('click').bind('click', function () { prevMonth(opts); });
        $tbl.find(opts.selectorNext).unbind('click').bind('click', function () { nextMonth(opts); });

        var today = new Date();
        if (opts.year < calendarModel.BeginYear
            || (opts.year == calendarModel.BeginYear && opts.month <= calendarModel.BeginMonth)) {
            $tbl.find(opts.selectorPre).hide();
        } else {
            $tbl.find(opts.selectorPre).show();
        }

        if (monthModel.Year > calendarModel.EndYear
            || (monthModel.Year == calendarModel.EndYear && monthModel.Month >= calendarModel.EndMonth)) {
            $tbl.find(opts.selectorNext).hide();
        } else {
            $tbl.find(opts.selectorNext).show();
        }

        $tbody = $tbl.find('tbody');
        // UI初始化
        $tbody.empty()
        $tbl.find(opts.selectorTitle).text(monthModel.Year + "年" + monthModel.Month + "月");
        opts.year = monthModel.Year;
        opts.month = monthModel.Month;
        opts.init.year = opts.init.year || monthModel.Year;
        opts.init.month = opts.init.month || monthModel.Month;

        var rows = 5;
        for (var i = 0; i < rows; i++) {
            $tr = $('<tr/>');
            for (var j = 0; j < opts.columns; j++) {
                var index = opts.columns * i + j;
                var dayModel = monthModel.Days[index];

                var $td = $(opts.tmplDay[dayModel.DayMode]);

                if (dayModel.DayMode != 1 && dayModel.DayMode != 4) { // 包括不需要响应点击的各种情况
                    $td.append('<b>' + dayModel.Day + '</b>');
                } else {
                    var $a = $('<a href="javascript:;">');
                    // hold住
                    $a.attr('dateString', dayModel.DateString);
                    $a.click(function () {
                        alert($(this).attr('dateString'));
                    });

                    if (dayModel.DayMode == 4) {
                        $a.append('<span class="price">候补</span><b>' + dayModel.Day + '</b>');
                    } else {
                        $a.append('<span class="price">¥<dfn>' + dayModel.Price + '</dfn>万</span>');

                        if (dayModel.MinPerson > 0) {
                            $a.append('<span class="group">' + dayModel.MinPerson + '人成团</span>');
                        }

                        $a.append('<b>' + dayModel.Day + '</b>');
                    }
                    $td.append($a);
                }
                $tr.append($td);
            }
            $tbody.append($tr);
        }

        opts.month++;
    };
})(jQuery);

tmpl.html

    <table>
        <caption>
            <a href="javascript:;" class="pre">&lt;</a><span class="cal-title">2013年7月</span><a href="javascript:;" class="next">&gt;</a></caption>
        <thead>
            <tr>
                <th class="weekend">
                    日
                </th>
                <th>
                    一
                </th>
                <th>
                    二
                </th>
                <th>
                    三
                </th>
                <th>
                    四
                </th>
                <th>
                    五
                </th>
                <th class="weekend">
                    六
                </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>