reactjs 如何使用fullcalendarjs react event update来更新查看开始日期?

vmdwslir  于 2023-01-17  发布在  React
关注(0)|答案(1)|浏览(149)

大家好,我正在使用fullcalendarjs与React+ typescript 。
当我想要更新现有事件时遇到一个问题。
我可以使用argeventmutate很好地更新事件标题,这也会更新日历视图,但问题是开始和结束日期被忽略,日历不刷新。
如果我像下面这样手动更新

//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;

1.单击某个日期,将添加一个新事件
1.单击已创建的事件,我正在更新标题+日期。您将在视图中只看到新标题,日期将保持不变(旧日期+时间)

4c8rllxm

4c8rllxm1#

不幸的是,fullCalendar不能在一次方法调用中更新事件的所有属性(我不知道为什么),它要求日期与其他事件数据分开更新。
在这种情况下,您可能只需要直接调用一个函数来将内容发送到API,而不是依赖于eventChange

相关问题