先放张图和源代码 jquery版 ： https://gitee.com/under_the_sky/dateTask/tree/master/jquery%E7%89%88
下载地址 ：https://gitee.com/under_the_sky/dateTask.git
使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="css/kgodate.css"/>
<script src="js/KGODateTask.js"></script>
</head>
<body>
<div class="content-date"></div>
<script>
KGODate.init($('.content-date'),2018,11);
KGODate.addTask('2018-11-06');
</script>
</body>
</html>
1）引用jquery.js ， KGODateTask.js 和 kgodate.css ；其中 KGODateTask.js 使用闭包封装日历组件，kgodate.css 是对日历样式声明
2) 为日历声明容器
3） 初始化日历
// 指定日期 的日历 初始化
KGODate.init($('.content-date'),2018,11);
//默认当前月的日历 初始化
KGODate.init($('.content-date'));4）addTask新增任务功能还未完善，后面会更新。入参会定义为json对象，日历按照月份展示，因此只会支持到当前月新增任务
源代码 jquery版 下载地址 ： https://gitee.com/under_the_sky/dateTask.git
附上js部分代码（最新版可以到码云里下载）
/**
* 为了不让该对象的错误影响系统，这里进行一下闭包操作
*/
var KGODate = (function(){
/**
* 内部方法，获取当前月共有多少天
* 打印上个月的最后几天时需要知道上个月共有几天
*
*/
function getMonthTotalDays(year , month){
//当前月的开始日期
var startDate = new Date(year,month-1,1);
//当前月的结束日期
var endDate = new Date(year,month,0);
//当前月共多少天
var gapDay = Math.abs(endDate - startDate) / (1000*60*60*24) + 1 ;
return gapDay;
}
/**
* 定义一个内部方法获取当月的日期数据，
*/
function getMonthDays(year,month){
//gapDay 标示这个月和上个月中间相差多少天，意思就是当月共有多少天
var today , thisMonth ,thisYear ,thisfirstDay ,thisLastDay , gapDay;
var dateArray = [];
//如果没有传年或者月，就认为是当前月
if(!year||!month){
today = new Date;
thisMonth = today.getMonth()+1;
thisYear = today.getFullYear();
var startDate = new Date(thisYear,thisMonth-1,1);
var endDate = new Date(thisYear,thisMonth,0);
thisfirstDay = startDate.getDay();
thisLastDay = endDate.getDay();
//一星期有7天，外国星期天是第一天，所以星期天是 0 这些做一下转化
//if(thisLastDay==0) thisLastDay = 7;
thisLastDay = thisLastDay==0 ? 7 : thisLastDay ;
gapDay = Math.abs(endDate - startDate) / (1000*60*60*24) + 1 ;
}else{
//获取当前月，js的月份是从0-11的，所以传入数据需要 -1
today = new Date(year,month-1);
//年数据，月数据有可能发生越界，比如 11月31号 是12月1号 ，这里需要重新获取一些当前月和当前年
thisMonth = today.getMonth()+1;
thisYear = today.getFullYear();
var startDate = new Date(thisYear,thisMonth-1,1);
var endDate = new Date(thisYear,thisMonth,0);
//这里的firstDay 是本月的第一天是周几
thisfirstDay = startDate.getDay();
//LastDay 同上
thisLastDay = endDate.getDay();
//一星期有7天，外国星期天是第一天，所以星期天是 0 这些做一下转化
//if(thisLastDay==0) thisLastDay = 7;
thisLastDay = thisLastDay==0 ? 7 : thisLastDay ;
//日期相减返回的是毫秒，并且会少一天
gapDay = Math.abs(endDate - startDate) / (1000*60*60*24) + 1 ;
}
//当前数据表格需要输出多少天 ，sum = 当月天数 + 上个月最后几天 + 下个月的开始几天
//arraySize 一定是7的整数倍 ，但是有可能是4*7 ，有可能是5*7 也有可能是 6*7
//这里计算 数组长度是为了返回最小的 数组长度 不严谨的做法可以统一用 6*7
var arraySize = parseInt(gapDay) + parseInt(thisfirstDay) +(7-thisLastDay-1);
//上一个月的最后一天
var lastMonthLastDay =getMonthTotalDays(thisYear,thisMonth-1);
//下面开始循环将日历的数据放数组中
for(var i=0; i < arraySize;i++){
// 星期几 ？ i是从零开始的，所以这里要 +1
var _weeknum = (i+1)%7;
//如果是周天，对7取余数会等 0 ，这里三目运算修改一下
_weeknum = _weeknum==0 ? 7 : _weeknum ;
// 打印上个月的最后几天，这里本月的第一天是从1开始计算的（周天被转化为了7）所以要打印到前一天
if(i<thisfirstDay-1){
dateArray.push({
week:_weeknum,
type:'lastMonth',
days:lastMonthLastDay-(thisfirstDay-1)+i+1,
});
//打印当月时间
}else if(Math.abs(i+1-thisfirstDay+1) <= gapDay){
dateArray.push({
week:_weeknum,
type:'thisMonth',
days:Math.abs(i+1-thisfirstDay+1),
});
//打印下个月数据
}else{
dateArray.push({
week:_weeknum,
type:'nextMonth',
days:Math.abs(i+1-thisfirstDay - gapDay)+1,
});
}
}
//返回对象，当前年，当前月，当前月天数据
return {
year:thisYear,
month:thisMonth,
days:dateArray
};
}
/**
* 添加内部方法打印日历头部信息
*
*/
function printHeadDom($dom,days){
var _kgo_date_dom = '<div id="kgo-date-content">'
+' <div class="kgo-date-task-title">'
+ days.year +'-' + days.month
+' </div>'
+' <table class="kgo-date-task" cellspacing="0">'
+' <colgroup>'
+' <col>'
+' <col>'
+' <col>'
+' <col>'
+' <col>'
+' <col style="background-color: rgb(51,255,202,0.3);">'
+' <col style="background-color: rgb(51,255,202,0.3);">'
+' </colgroup>'
+' <thead>'
+' <tr>'
+' <th>星期一</th>'
+' <th>星期二</th>'
+' <th>星期三</th>'
+' <th>星期四</th>'
+' <th>星期五</th>'
+' <th>星期六</th>'
+' <th>星期天</th>'
+' </tr> '
+' </thead>'
+' <tbody class="date-day-table">'
+' </table>'
+'</div> '
$dom.append(_kgo_date_dom);
};
/**
* 定义内部方法打印 日期信息
*/
function printDateBody($dom,days){
var dom ="";
$.each(days.days,function(index,item){
var td_date_sty = 'this-month-day-sty'
if(item.type=='lastMonth'||item.type=='nextMonth'){
var td_date_sty = 'not-this-month-day-sty'
}
if((index+1)%7==1){
dom += '<tr>';
}
var theday ="";
if(item.type=='thisMonth'){
if(item.days<10){
theday=days.year+"-"+days.month+"-0"+item.days;
}else{
theday=days.year+"-"+days.month+"-"+item.days;
}
}
dom += '<td class="'+td_date_sty+'" theday="'+theday+'">'
+ '<span class="kgo-date-day">'+item.days+'</span></td>';
if((index+1)%7==0){
dom+='</tr>';
}
})
$('.date-day-table').append(dom);
$('.kgo-date-task td').on('click',function(){
alert($(this).text());
});
};
function printDateTask(day){
var dom ='<div class="kgo-date-task-body">'
+'<span class="kgo-undone-badge kgo-badge-total">未完成（1）</span><br>'
+'<span class="kgo-done-badge kgo-badge-total">已完成（5）</span><br>'
+'<span class="kgo-overdue-badge kgo-badge-total">已超时（3）</span>'
+'<span class="kgo-overdue-badge kgo-badge-total">已超时（3）</span>'
+'</div>';
$('.kgo-date-task td[theday='+day+']').append(dom);
};
/**
* 暴露的属性和方法
*/
return {
init : function($dom,year,month){
var days = getMonthDays(year,month);
printHeadDom($dom,days);
printDateBody($dom,days);
},
addTask(day){
printDateTask(day);
}
}
})();