修改周起始为周一的Codepen日历出现月初日期缺失问题

我之前也遇到过完全一样的坑！把周起始改成周一后，当月第一天如果是周日就会离奇“消失”，核心原因是原来的日历逻辑只盯着当月的首尾日期，没考虑到当月第一天可能属于上周（周一为起始的话，周日是上周最后一天），所以得调整日历的日期范围，把这些跨周的日期包含进来。

具体解决方案步骤： #

1. 先给moment设置正确的周起始规则
   在代码最开头加上这段，确保moment把周一当作一周的第一天：

   moment.locale('en', {
     week: {
       dow: 1 // 1代表周一，默认0是周日
     }
   });
   

2. 调整日历的起始与结束日期范围
   找到你Calendar构造函数里定义this.start和this.end的地方，原来的代码可能直接取当月的第一天和最后一天，改成下面这样，让日历覆盖当月第一天所在周的周一到当月最后一天所在周的周日：

   // 当月第一天所在周的周一（作为日历的起始边界）
   this.start = moment(today).startOf('month').startOf('week');
   // 当月最后一天所在周的周日（作为日历的结束边界）
   this.end = moment(today).endOf('month').endOf('week');
   

3. 修正日期渲染的判断逻辑
   接下来要确保渲染时，不仅显示当月的日期，也显示前后月份的“填充”日期（可以用样式区分）。比如循环从this.start到this.end的每一天，判断当天是否属于当月：

   var date = this.start.clone();
   while (date.isBefore(this.end)) {
     var isCurrentMonth = date.month() === today.month();
     // 创建日期元素
     var dayEl = document.createElement('div');
     dayEl.textContent = date.date();
     // 给当月日期加高亮样式，非当月加灰色样式区分
     if (isCurrentMonth) {
       dayEl.classList.add('active');
     } else {
       dayEl.classList.add('gray');
     }
     this.el.appendChild(dayEl);
     date.add(1, 'day');
   }
   

这样修改后，2018年4月1日（周日）就会出现在日历第一行的最后一个位置（对应3月26日-4月1日这一周），4月2日作为新一周的周一出现在第二行开头，完美解决首日缺失的问题！

内容的提问来源于stack exchange，提问作者WIverson97