分享

js实现日历简单算法

 新进小设计 2021-09-18
 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)

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约