js实现日历简单算法 / 四六文摘

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)

js实现日历简单算法

相关推荐