大家好,我正在使用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.单击已创建的事件,我正在更新标题+日期。您将在视图中只看到新标题,日期将保持不变(旧日期+时间)
1条答案
按热度按时间4c8rllxm1#
不幸的是,fullCalendar不能在一次方法调用中更新事件的所有属性(我不知道为什么),它要求日期与其他事件数据分开更新。
在这种情况下,您可能只需要直接调用一个函数来将内容发送到API,而不是依赖于
eventChange
。