FullCalendar 3.9.0 AgendaWeek视图事件日期时间显示错误求助

这个问题大概率是时区配置不匹配导致的，以下是具体排查和解决步骤：

1. 检查时区相关配置 #

FullCalendar 3.x 默认使用本地时区（timezone: 'local'），但如果代码中手动设置了utc: true或者timezone: 'UTC'，会导致事件时间被错误转换：

• 若事件里的时间是本地时间（比如你所在时区的2023-04-17 09:00），但FullCalendar被配置为按UTC解析，就会出现时间偏移。
• 反之，若事件时间是UTC时间，但FullCalendar用本地时区显示，也会出错。

2. 修正时区配置 #

根据事件时间类型调整配置：

• 如果事件时间是本地时间，确保配置中明确设置：

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  timezone: 'local', // 关键配置：使用本地时区解析事件时间
  events: [
    // ... 其他事件
    {
      title: 'Event 3',
      start: '2023-04-17T09:00:00',
      end: '2023-04-17T11:30:00'
    }
  ]
});

• 如果事件时间是UTC时间，需要在时间字符串末尾加Z标记，同时配置timezone: 'UTC'：

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  timezone: 'UTC',
  events: [
    {
      title: 'Event 3',
      start: '2023-04-17T09:00:00Z', // Z表示UTC时间
      end: '2023-04-17T11:30:00Z'
    }
  ]
});

3. 验证浏览器时区 #

确认浏览器的系统时区设置和你预期的一致，避免系统时区本身导致的显示偏差。

4. 排查日期格式解析问题 #

确保事件时间字符串是标准ISO格式（YYYY-MM-DDTHH:mm:ss），FullCalendar 3.9.0对非标准格式的解析可能出现异常。

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