js封装日历控件

最终效果

代码实现

<script>
    $(function () {
        $(".j-calendar").calendar({
            date: '2017-08-03',
            callback: function () {
                var date = new Date($(this).attr("year"), $(this).attr("month"), $(this).attr("day"));
                alert(date);
            },
            loadinfo: function () {
                var liList = $(".j-calendar").find('li');
                $.each(liList, function(i, item) {
                    if ($(item).attr("day") == "30") {
                        $(item).find(".m-CYwork").html("￥2580");
                    }
                });
            }
        });
    });
</script>

/*
 * @author:Cheryl
 * @made:2015-12-31
 */

(function (window, $, undefined) {
    $.canlendarClass = {
        defaults: {
            date: new Date(),
            canderShwType: "default",
            callback: function () {

            },
            loadinfo: function () {

            }
        },
        hrtnDay: 30,
        hrtnOne: 0,
        hrtnLast: 0,
        title: "<ul class='m-CYul-tit m-CYul'><li>周日</li><li>周一</li><li>周二</li><li>周三</li><li>周四</li><li>周五</li><li>周六</li></ul>",
        canComplete: function (d) {
            this.canDayone(d);
            this.canDay(d);
        },
        canDayone: function (d) {
            var dayone = new Date(d.getFullYear(), d.getMonth(), 1);
            this.hrtnOne = dayone.getDay();//0 1 2 3 4 5 6
            this.canDay(d);
            var dayLast = new Date(d.getFullYear(), d.getMonth(), this.hrtnDay);
            this.hrtnLast = dayLast.getDay();
        },
        canDay: function (d) {
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            //判断拥有多少天
            switch (month) {
                case 1:; case 3:; case 5:; case 7:; case 8:; case 10:; case 12: this.hrtnDay = 31; break;
                case 4:; case 6:; case 9:; case 11: this.hrtnDay = 30; break;
                case 2: if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { this.hrtnDay = 29; } else { this.hrtnDay = 28; }; break;
                default: console.log("请您输入正确的月份。"); break;
            }
        },
    }
    $.extend($.fn, {
        calendar: function (option) {
            if ($(this)[0] == null || $(this)[0] == undefined) {
                return;
            };
            $.canlendarClass.defaults.canderShwType = "default";
            for (var i = 0; i < 12; i++) {
                //参数合并
                $.canlendarClass.defaults = $.extend($.canlendarClass.defaults, $.extend(option || {}) || {});
                var d = new Date(add(new Date($.canlendarClass.defaults.date) || new Date(), "m", i));
                //参数计算
                $.canlendarClass.canComplete(d);
                //添加
                $(this).addChild(d);
            }
            //给这些li添加方法
            $(this).children("li").click(function () {
                $(this).addClass("active").siblings("li").removeClass("active");
            });
            //调用加载数据的方法
            $.canlendarClass.defaults.loadinfo();
            $(this).children("li").on("click", $.canlendarClass.defaults.callback);
            //样式添加|当天标蓝
            if ($.canlendarClass.defaults.canderShwType == "small") {
                $(this).addClass("s-CY m-CYul");
                /*var eqli=$.canlendarClass.hrtnDay<=$.canlendarClass.defaults.day?$.canlendarClass.hrtnDay:$.canlendarClass.defaults.day;
                $(this).children("li[day="+eqli+"]").addClass("active");*/
            } else {
                $(this).addClass("d-CY m-CYul");
            };
        },
        addChild: function (d) {

            // $(this).html("");
            $(this).append(
                "<div class=\"yearMonth\">" +
                "<h2><span id=\"year\">" + d.getFullYear() + "年</span><span id=\"month\">" + parseInt(d.getMonth() + 1) + "月</span></h2>" +
                "</div>" +
                $.canlendarClass.title);
            for (var i = 0; i < $.canlendarClass.hrtnOne; i++) {
                $(this).append('<li class="noday"></li>');
            };

            var strsld = "";
            switch ($.canlendarClass.defaults.canderShwType) {
                case "default":
                    strsld = "<ul class='m-CYwork'></ul>";
                    break;
                case "small":
                    strsld = "";
                    break;
                default:
                    break;
            }
            for (var i = 0; i < $.canlendarClass.hrtnDay; i++) {
                $(this).append('<li year="' + (d.getFullYear()) + '" month="' + (d.getMonth() + 1) + '" day="' + (i + 1) + '"><span>' + (i + 1) + '</span>' + strsld + '</li>');
            };
            for (var i = 0; i < (6 - $.canlendarClass.hrtnLast) ; i++) {
                $(this).append('<li class="noday"></li>');
            };
            var eqli = $.canlendarClass.hrtnDay <= $.canlendarClass.defaults.day ? $.canlendarClass.hrtnDay : $.canlendarClass.defaults.day;
            $(this).children("li[day=" + new Date().getDate() + "]:first").addClass("m-CYtoday");


        },
    });
})(window, jQuery);


var add = function (datetiem, strInterval, Number) {
    var dtTmp = datetiem;
    switch (strInterval) {
        case 's': return new Date(Date.parse(dtTmp) + (1000 * Number));
        case 'n': return new Date(Date.parse(dtTmp) + (60000 * Number));
        case 'h': return new Date(Date.parse(dtTmp) + (3600000 * Number));
        case 'd': return new Date(Date.parse(dtTmp) + (86400000 * Number));
        case 'w': return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
        case 'q': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number * 3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
        case 'm': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, 01, dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
        case 'y': return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
    }
}