如何使用 fullcalendar js react event update 来更新视图开始日期？答案

【问题标题】：How to use fullcalendarjs react event update ito update the view start date?如何使用 fullcalendar js react event update 来更新视图开始日期？
【发布时间】：2023-01-13 18:52:39
【问题描述】：

大家好，我正在使用 fullcalendarjs 和 react + typescript。

当我想更新现有事件时遇到一个问题。

我可以使用 arg.event.mutate 更新事件标题，这也会更新日历视图，但问题是开始和结束日期被忽略并且日历不刷新。

如果我像下面这样手动更新

//arg.event.setStart(item.postAtUtcTimestamp);
                //arg.event.setEnd(null);

它工作正常并且视图使用新值更新但问题是我收到 2 个 eventChange 事件而不仅仅是 1 个。

我依靠 eventChange 事件通过 api 更新我的数据库中的事件。

我创建了一些代码以便您可以重现该问题，ts 中的代码如下：

import React from 'react';

import { DateSelectArg, EventAddArg, EventChangeArg, EventClickArg } from '@fullcalendar/core'; // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin, { DateClickArg } from '@fullcalendar/interaction';
import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid';


const Magic: React.FC = () => {

    const handleDateClick = (arg: DateClickArg): void => {
        arg.view.calendar.addEvent({
            title: 'new event',
            start: Date.now(),
            allDay: arg.allDay,
            rawItem: {a: 2,},
        });
    };

    const handleEventClick = (arg: EventClickArg): void => {
        arg.event.mutate({
            standardProps: {
                title: 'new event text updated',
                start: Date.now() + 3600,
                end: null,
            },
            extendedProps: {
                rawItem: {c: 'newitemisupdated'},
            },
        });
    };

    return (
        <FullCalendar
            events={[]}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            initialView="timeGridWeek"
            nowIndicator={true}
            headerToolbar={{
                center: 'dayGridMonth,timeGridWeek,timeGridDay',
            }}
            dateClick={handleDateClick}
            eventClick={handleEventClick}
        />
    );
}
export default Magic;

点击某个日期，将添加一个新事件
单击创建的事件，我正在更新标题 + 日期。您只会在视图中看到新标题，并且日期仍然相同（旧日期+时间）

【问题讨论】：

为什么不使用 fullcalendar.io/docs/Event-setDates 而不是单独更改开始和结束？
嗨，我想一次性改变标题开始和结束日期，并且只触发一个结果 eventChange。即使我使用您建议的方法，我仍然会收到 2 个更改事件
不幸的是，fullCalendar 没有为此提供方法（我不知道为什么）。它要求日期与其他数据分开更新。在这种情况下，您可能只需要直接调用一个函数来将内容发送到您的 API，而不是不幸地依赖 eventChange。

标签： javascript reactjs fullcalendar fullcalendar-6

【解决方案1】：

不幸的是，fullCalendar 不提供在一个方法调用中更新事件的所有属性的能力（我不知道为什么）。它要求日期与其他事件数据分开更新。

在这种情况下，您可能只需要直接调用一个函数来将内容发送到您的 API，而不是不幸地依赖eventChange。

【讨论】：