js实现日历简单算法

  • A+
所属分类:Web前端
摘要

 使用:  获取这一年的日历: 

 1 /**  2  * 初始化当天的日历数据 (没有参数默认当天)  3  * @method  4  * @param {Date} date  5  * @param {Number} line 日历中显示几行  6  * @returns [[],[]]  7  */  8 function initMonthCalendar(dates, line = 6) {  9   var date = new Date(dates);                          // 初始时间格式 10   var y = date.getFullYear(); 11   var m = date.getMonth(); 12   var days = new Date(y, m + 1, 0).getDate();          // 获取这个月共有多少天 13   var firstDayWeek = new Date(y, m, 1).getDay();       // 月份第一天星期几 14  15  16   var arr = [];     // 存储日历格式的数组 17   var n = [];       // 日历格式中的一行 18   var d = 1;        // 日历格式中的天数 19  20   // 先根据这个月第一天排星期几 21   // 把上个月剩下几天留在这个月的'奸细'放在最前头 22   for(let i = 0; i < firstDayWeek; i++) { 23     // new Date(2020, 8, 0)   --> 9月没有0号 === 8月3127     n.unshift(getDate(y, m, 0 - i).getDate()); 28   } 29  30   // 开启循环 31   // 一星期占一行,一行一个外循环 32   // 这里我默认想要6行 33   for (let j = 0; j < line; j++) { 34     // 一天占一个格子,最多一星期7个格子 35     // 这里我想要7个格子 36     for (let i = 0; i < 7; i++) { 39       if(d > days) { 40         // 这个月都放完了,该放什么? 41         // new Date(2020, 8, 31)  --> 9月没有31 === 10月1
       n.push(new Date(y, m, d++).getDate());
44 } else { 45 // 放置这个月的天数
       n.push(d++);
48 }51 52 if (n.length == 7) break; // 放了7个格子该结束了 53 } 54 55 arr.push(n); 56 n = []; // 这一行放完了,清空ba 57 } 58 59 60 return arr; 61 }

 

使用:

 

 1 var calendar= initMonthCalendar('2020-09-19');  2   3 console.log(calendar);  4   5 // [  6 //     [30, 31, 1, 2, 3, 4, 5]  7 //     [6, 7, 8, 9, 10, 11, 12]  8 //     [13, 14, 15, 16, 17, 18, 19]  9 //     [20, 21, 22, 23, 24, 25, 26] 10 //     [27, 28, 29, 30, 1, 2, 3] 11 //     [4, 5, 6, 7, 8, 9, 10] 12 // ]

 

获取这一年的日历:

var arr = []; var y = new Date().getFullYear();  for (let i = 0; i < 12; i++) {   const d = '' + y + '-0' + (i + 1) + '-01';    arr.push(initMonthCalendar(d)) }     console.log(arr)