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
相关产品推荐
相关产品推荐

