React+TypeScript中FullCalendar事件更新日期不生效问题求助

API 探路者

2026-8-5

问题解决：FullCalendar事件日期更新异常与重复触发eventChange

问题分析

使用arg.event.mutate更新事件时，标题生效但日期不更新：你传入的start是数字类型的时间戳（Date.now()+3600），而FullCalendar的标准属性start/end要求接收Date对象，非Date类型的参数会被忽略，导致日期无法更新。
手动调用setStart/setEnd触发两次eventChange：因为每个setStart/setEnd方法调用都会单独触发一次事件，两次调用自然触发两次回调。

解决方案

方案1：修复`mutate`的参数格式

将时间戳转为Date对象，mutate就能正常识别并更新日期，且仅触发一次eventChange：

const handleEventClick = (arg: EventClickArg): void => {
    arg.event.mutate({
        standardProps: {
            title: 'new event text updated',
            start: new Date(Date.now() + 3600000), // 转成Date对象，3600000为1小时的毫秒数
            end: null,
        },
        extendedProps: {
            rawItem: {c: 'newitemisupdated'},
        },
    });
};

注意：Date.now()返回毫秒数，若要添加1小时需加3600000，之前的+3600仅添加1秒，需根据需求调整。

方案2：用`batchUpdates`包裹更新操作（保留`setStart`/`setEnd`写法时）

FullCalendar提供batchUpdates方法，可将多个属性更新操作包裹在其中，仅触发一次eventChange：

const handleEventClick = (arg: EventClickArg): void => {
    arg.view.calendar.batchUpdates(() => {
        arg.event.setStart(new Date(Date.now() + 3600000));
        arg.event.setEnd(null);
        arg.event.setProp('title', 'new event text updated');
        arg.event.setExtendedProp('rawItem', {c: 'newitemisupdated'});
    });
};