React中FullCalendar v6 firstDay设置在不同时区不生效问题求助

一、firstDay:1 在PDT时区不生效的解决方案 #

在FullCalendar v6中，仅设置firstDay: 1有时会因时区偏移导致周起始计算异常，尤其是西时区（如PDT，UTC-7）。这是因为日历内部的周边界计算未正确结合本地时区偏移与firstDay配置。

解决步骤：

• 显式配置timeZone为"local"：确保日历使用用户本地时区进行日期计算，避免UTC与本地时区的差异干扰周起始判断

  import { Calendar } from '@fullcalendar/react';
  import dayGridPlugin from '@fullcalendar/daygrid';
  
  function MyCalendar() {
    return (
      <Calendar
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        firstDay={1}
        timeZone="local"
        // 其他配置项
      />
    );
  }
  

• 结合locale配置强化周规则：如果使用locale，需确保locale的week.dow（一周起始日）与firstDay一致，避免locale配置覆盖firstDay

  import enLocale from '@fullcalendar/core/locales/en';
  
  const customEnLocale = {...enLocale, week: { dow: 1, doy: 4 }};
  
  <Calendar
    locales={[customEnLocale]}
    locale="en"
    firstDay={1}
    timeZone="local"
  />
  

二、修改getDay()为getUTCDay()的对齐风险 #

直接将CalendarDayHeader中的day.date.getDay()改为day.date.getUTCDay()会必然导致表头与日期单元格的对齐错误，原因如下：

• getDay()返回本地时区下的星期几（0=周日，1=周一），getUTCDay()返回UTC时区下的星期几，二者的计算基准完全不同
• 当用户处于西时区（如PDT）时，本地周一00:00对应的UTC时间是周日17:00，此时getUTCDay()返回0（周日），但本地实际是周一，表头会将该日期错误显示在“周日”列下
• 即使在东时区，跨UTC日期的时段（如IST周一00:00对应UTC周日18:30）也会导致对齐偏差

因此该修改不可取，必须基于本地时区的星期计算渲染表头，才能保证与下方日期单元格的对齐一致性。

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