日曆任務外掛（jquery版）
阿新 • • 發佈：2018-12-01
先放張圖和原始碼 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); } } })();