如何在Vue日历组件中填充首尾日期之间的日期？

看起来你已经搭好了基础的日历框架，但还需要让日历呈现完整的周结构——也就是在当月日期的前后，分别填充上个月的末尾日期和下个月的开头日期，保证日历的每一行都是完整的7天。我帮你修改代码来实现这个功能：

修改后的Vue代码 #

new Vue({ 
  el: '#calendar', 
  data() { 
    return { 
      date: new Date(), 
      daysOfWeek: ['pn', 'vt', 'sr', 'cht', 'pt', 'sb', 'vs'] 
    } 
  }, 
  computed: { 
    days() { 
      const date = this.date;
      const year = date.getFullYear();
      const month = date.getMonth();
      const amountDays = this.daysInMonth(year, month + 1);
      const daysArr = [];

      // 计算当月第一天对应的星期索引（适配你的daysOfWeek顺序：0=周一，6=周日）
      const firstDayWeekIndex = (new Date(year, month, 1).getDay() + 6) % 7;

      // 填充当月之前的上个月日期
      if (firstDayWeekIndex > 0) {
        const prevMonthLastDay = this.daysInMonth(year, month);
        for (let i = firstDayWeekIndex - 1; i >= 0; i--) {
          daysArr.push({
            day: prevMonthLastDay - i,
            isCurrentMonth: false
          });
        }
      }

      // 填充当月日期
      for (let i = 1; i <= amountDays; i++) {
        daysArr.push({
          day: i,
          isCurrentMonth: true
        });
      }

      // 计算当月最后一天对应的星期索引
      const lastDayWeekIndex = (new Date(year, month, amountDays).getDay() + 6) % 7;
      // 填充当月之后的下个月日期
      const nextMonthNeedDays = 6 - lastDayWeekIndex;
      if (nextMonthNeedDays > 0) {
        for (let i = 1; i <= nextMonthNeedDays; i++) {
          daysArr.push({
            day: i,
            isCurrentMonth: false
          });
        }
      }

      return daysArr; 
    } 
  }, 
  methods: { 
    daysInMonth(year, month) { 
      return new Date(year, month, 0).getDate() 
    } 
  } 
})

配套的模板和样式建议 #

为了更好地展示效果，你可以更新模板，通过isCurrentMonth字段区分当月和其他月份的日期，方便添加样式：

<div id="calendar">
  <div class="week-labels">
    <span v-for="(label, idx) in daysOfWeek" :key="idx">{{ label }}</span>
  </div>
  <div class="days-grid">
    <span 
      v-for="(day, idx) in days" 
      :key="idx"
      :class="{ 'current-month': day.isCurrentMonth, 'other-month': !day.isCurrentMonth }"
    >
      {{ day.day }}
    </span>
  </div>
</div>

添加简单的样式来区分日期：

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.current-month {
  color: #2d3748;
  font-weight: 600;
}
.other-month {
  color: #a0aec0;
}

代码说明 #

1. 日期索引适配：因为JavaScript的getDay()返回0代表周日，而你的daysOfWeek数组以周一开头，所以用(getDay() + 6) %7转换为适配你数组的索引。
2. 填充上月日期：根据当月第一天的星期位置，计算需要补多少天上月的最后几天。
3. 填充下月日期：根据当月最后一天的星期位置，计算需要补多少天下月的开头几天，确保日历最后一行也是完整的7天。
4. 日期标记：用isCurrentMonth字段标记是否为当月日期，方便样式区分，提升用户体验。

这样你的日历就会显示完整的周结构，首尾的空白日期也会被相邻月份的日期填充啦～

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