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") == "") {
                        $(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: ,
        hrtnOne: ,
        hrtnLast: ,
        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(), );
            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() + ;
            //判断拥有多少天
            switch (month) {
                case :; case :; case :; case :; case :; case :; case : this.hrtnDay = ; break;
                case :; case :; case :; case : this.hrtnDay = ; break;
                case : if (year %  ==  && year %  !=  || year %  == ) { this.hrtnDay = ; } else { this.hrtnDay = ; }; break;
                default: console.log("请您输入正确的月份。"); break;
            }
        },
    }
    $.extend($.fn, {
        calendar: function (option) {
            if ($(this)[] == null || $(this)[] == undefined) {
                return;
            };
            $.canlendarClass.defaults.canderShwType = "default";
            for (var i = ; i < ; 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() + ) + "月</span></h2>" +
                "</div>" +
                $.canlendarClass.title);
            for (var i = ; 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 = ; i < $.canlendarClass.hrtnDay; i++) {
                $(this).append('<li year="' + (d.getFullYear()) + '" month="' + (d.getMonth() + ) + '" day="' + (i + ) + '"><span>' + (i + ) + '</span>' + strsld + '</li>');
            };
            for (var i = ; i < ( - $.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) + ( * Number));
        case 'n': return new Date(Date.parse(dtTmp) + ( * Number));
        case 'h': return new Date(Date.parse(dtTmp) + ( * Number));
        case 'd': return new Date(Date.parse(dtTmp) + ( * Number));
        case 'w': return new Date(Date.parse(dtTmp) + (( * ) * Number));
        case 'q': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number * , dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
        case 'm': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, , dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
        case 'y': return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
    }
}