FullCalendar在Salesforce LWC中出现时区偏移重复叠加的时间显示问题

我们在Salesforce LWC组件中使用FullCalendar.io库，设置timeZone为'local'。服务器返回的事件数据在浏览器控制台显示正常，但FullCalendar前端显示的时间存在错误，时区偏移被重复叠加：

• 服务器返回事件开始时间为2022-12-07T12:00:00.000+0000（UTC时间12点），在GMT+1时区下本应显示为13:00，实际却显示为14:00；
• 在印度GMT+5:30时区下，实际叠加了11小时而非5:30。

问题原因 #

当前代码将服务器返回的UTC时间转成Date对象后调用toString()，生成的字符串包含本地时区信息。而FullCalendar在timeZone: 'local'模式下，会再次对这个带时区的时间做本地时区转换，导致偏移被重复计算。

解决方案 #

直接传递服务器返回的原始UTC时间字符串给FullCalendar，避免多余的Date对象转换，让FullCalendar自行处理时区转换逻辑。

修改后的代码 #

@wire(fetchEvents)
eventObj(value) {
    this.eventOriginalData = value; // 用于缓存刷新
    const { data, error } = value;
    if (data) {
        // 格式化为FullCalendar事件对象
        let events = data.map(event => {
            // 直接使用服务器返回的UTC时间字符串，无需额外转换
            return { 
                id: event.Id, 
                title: event.Subject, 
                start: event.StartDateTime,
                end: event.EndDateTime
            };
        });
        this.events = events; // 移除不必要的JSON序列化操作

        console.log(this.events);
        this.error = undefined;

        // 首次加载时渲染事件
        if (!this.eventsRendered) {
            const ele = this.template.querySelector("div.fullcalendarjs");
            $(ele).fullCalendar('renderEvents', this.events, true);
            this.eventsRendered = true;
        }
    } else if (error) {
        this.events = [];
        this.error = '未找到事件';
    }
}

关键修改点 #

1. 移除Date对象转换和toString()：服务器返回的2022-12-07T12:00:00.000+0000是标准UTC时间格式，FullCalendar可以直接解析，在timeZone: 'local'模式下会自动转换为本地时区时间，不会出现偏移叠加。
2. 删除冗余的JSON序列化：JSON.parse(JSON.stringify(events))完全不必要，直接赋值数组即可，避免额外转换带来的潜在问题。

额外检查 #

确保FullCalendar初始化时timeZone配置正确：

$(ele).fullCalendar({
    timeZone: 'local',
    // 其他配置项...
});

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