基于NextJS的日历未从周一启动的问题排查与修复请求

问题核心 #

你的日历组件在月起始日非周一（如5月起始为周三）时，会跳过无日期的星期（周一、周二）的日期块渲染，导致日历从周三开始错位。之前添加空白div的方式错误，直接在整体前插入空白，导致整个日历右移，未解决对应星期位置的占位问题。

错误原因 #

1. 原代码仅遍历currentCal中存在日期的星期key，无日期的星期不会被渲染，缺失对应位置的容器。
2. 使用moment().startOf('month').day()获取的是周日为0的星期值，直接用该值生成空白div会包含周日的位置，导致额外偏移。

修正方案 #

1. 定义固定的星期顺序数组，确保遍历完整的周一到周日，不遗漏任何星期位置。
2. 对每个星期，无论是否有日期，都渲染对应的日期容器：有日期则显示日期，无日期则显示空白占位块，保持布局高度一致。

修改后的完整代码片段 #

// 定义固定的星期顺序，确保从周一到周日遍历
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

{(calSelection === "month" && currentCal && Object.keys(currentCal).length > 0) && 
  weekDays.map(day => {
    // 获取当前星期对应的日期数组，没有则为空数组
    const dates = currentCal[day] || [];
    return (
      <div key={day} className="w-[12vw] flex flex-col items-center">
        <p className="font-semibold w-[12vw]">{day}</p>
        <div>
          {dates.length > 0 ? (
            dates.map(date => (
              <p key={date.fullDate} className="w-[12vw] h-[14vh] border-[1px] border-[#9297B0]">
                {date.fullDate.split("T")[0].split("-")[2]}
              </p>
            ))
          ) : (
            // 空白占位块，与日期块尺寸一致，保持布局对齐
            <div className="w-[12vw] h-[14vh] border-[1px] border-transparent"></div>
          )}
        </div>
      </div>
    );
  })
}

关键说明 #

• 通过固定遍历weekDays数组，确保周一到周日的每个位置都有对应的容器，不会因无日期而缺失。
• 空白占位块的尺寸与实际日期块完全一致，保证日历布局的整齐性，从周一开始对齐。

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