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());
}
}