You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Fullcalendar 6.1.0:修改日期后StartTime与EndTime自动变更1小时

解决FullCalendar 6.1.0中夏令时导致的时间偏移问题

问题现象

使用FullCalendar 6.1.0时,将事件日期修改为2023-03-26及之后时,事件的开始/结束时间会自动偏移1小时;日期早于该时间时显示正常,所有事件均受影响。

相关事件数据示例:

{
    "allDay" : false,
    "end" : "2023-03-25T10:30:00.000Z",
    "focus" : "2023-03-22T23:00:00.000Z",
    "id" : "F290E99B-B8C4-49FE-AED5-36078EB60C34",
    "start" : "2023-03-25T09:30:00.000Z"
}

{
    "allDay" : false,
    "end" : "2023-03-26T09:30:00.000Z",
    "focus" : "2023-03-22T23:00:00.000Z",
    "id" : "F290E99B-B8C4-49FE-AED5-36078EB60C34",
    "start" : "2023-03-26T08:30:00.000Z"
}

问题原因

2023年3月26日是欧洲中部时间(CET)切换到夏令时(CEST)的节点,此时本地时区与UTC的偏移量从+1变为+2。FullCalendar默认会根据浏览器的本地时区对UTC格式的事件时间进行转换,夏令时切换导致转换后的显示时间偏移1小时。

解决方法

1. 强制使用UTC时区显示

初始化Calendar时配置timeZone: 'UTC',这样事件的UTC时间将直接显示,不会进行时区转换:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC', // 强制使用UTC时区
    events: [/* 你的事件数据 */]
    // 其他配置项
  });
  calendar.render();
});

2. 指定正确的本地时区

如果需要保留本地时区显示,明确设置对应时区(比如'Europe/Berlin'),让FullCalendar正确处理夏令时转换:

var calendar = new FullCalendar.Calendar(calendarEl, {
  timeZone: 'Europe/Berlin', // 指定具体时区
  // 其他配置项
});

3. 确保事件时间格式规范

所有事件的start/end字段必须使用标准UTC格式(带Z后缀),避免因格式歧义导致的时区转换错误。

内容的提问来源于stack exchange,提问作者user21225104

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 00:26:01