[1]日历任务插件（jquery版）
先放张图和源代码 jquery版 ： https://gitee.com/under_the_sky/dateTask/tree/master/jquery%E7%89%88
下载地址 ：https://gitee.com/under_the_sky/dateTask.git
日历任务组件新增一套新的UI样式：
样式1：themeLaydate.css
![[1]日历任务插件（jquery版）_第1张图片](http://img.e-com-net.com/image/info8/9ecbc97635fc495e9aafac427ae73318.jpg)
样式2：kgodate.css
![[1]日历任务插件（jquery版）_第2张图片](http://img.e-com-net.com/image/info8/1983e34e2e4b49de9c3eb63fbeb9da88.jpg)
使用方法：
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'
+ days.year +'-' + days.month
+' | 星期一 | ' +'星期二 | ' +'星期三 | ' +'星期四 | ' +'星期五 | ' +'星期六 | ' +'星期天 | ' +'
|---|
'
+'未完成（1）
' +'已完成（5）
' +'已超时（3）' +'已超时（3）' +'
';
$('.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);
}
}
})();
' +'已完成（5）
' +'已超时（3）' +'已超时（3）' +'
插件已更新新增任务功能和点击监听方法 博文请见 https://blog.csdn.net/qq_26462567/article/details/84838634