FullCalendar shows events duplicated on modification #7071
Comments
|
Maybe it is because the calendar thinks it owns the events and creates new one. I also tried to implement 2 from fullcalendar/fullcalendar-react#65 |
|
This is similar to fullcalendar/fullcalendar-react#47 |
|
Disabling FullCalendar own event storage would solve this problem: #5150 |
|
It seems like this issue is specific to the React component that happens by updating the state in react which conflicts with the calendar automatically updating it's copy of the events. But it should work by updating the event with "Technique 2", did you try code like this? |
|
Hi @acerix, As far as I understand this and reducers: fullcalendar/fullcalendar-react#65 (comment) Nevertheless, maybe I am missing something. As far as I understand the example: In my case using a reducer that way is not possible, because the events are calculated from a larger object which does not hold the events directly. One thing I noticed about the example: |
|
Are there any updates? Is this planned to be fixed? :) |
|
when merging the new event into with the running events array, don't just merge in an EventApi object, use EventApi::toPlainObject instead... https://codesandbox.io/s/quirky-nightingale-vr1k1?file=/src/DemoApp.jsx |
|
I'm looking into some of the other problems now... |
|
I'm unable to get the events to duplicate after switching to toPlainObject. There's an artificial lag caused by the sleep, but that's expected. Does toPlainObject solve your problem? |
|
Thank you for the work-around, I will give it a try :) I will try writting a wrapper around FullCalendar which merges the events hold by the calendar and the events passed from react using toPlainObject. But I have to say, that I do not like that approach, as this seems to be quite hacky :) |
|
Same issue on fullcalendar-vue 5.3.0
In my case, this code is used on every eventDrop: async onEventDrop(data)
{
var end = data.event.end;
if(end == null)
{
end = dayjs(data.event.start).toDate();
}
this.changeDate(data.event, data.revert);
},
async changeDate(event, revert)
{
try
{
await $.post({
url: Routing.generate('calendar_changedate'),
data: {
id: event.id,
start: dayjs(event.start).format("YYYY-MM-DD HH:mm"),
end: dayjs(event.end).format("YYYY-MM-DD HH:mm"),
isAllDay: false
}
});
}
catch(e)
{
revert()
}
},Edit: I also checked your react example @arshaw , and it still duplicates:
|
|
In my case I found why it does this. Basically I move an event from day A to day B, then I drag from day B but do not drop yet, meanwhile my events are fetched from the server, here is an example, you can see the network tab (first request is change request, second is an all events fetch):
An example: https://codesandbox.io/s/misty-monad-xb6jy?file=/src/DemoApp.jsx |
@arshaw This issue occurs exactly when you are dragging an event, at the same time that a React setState occurs in the background (in this case in the setTimeout callback). This causes a render of the component. Thus, the events given to FullCalendar through the events props are displayed again. When the render occurs, it is like the moving event is unsync with the initial dragging event when a render occurs during the move. Thus, when dropping, FullCalendar creates a broad new event. |
duplicates.mp4 |
|
Have there been any updates on this matter? Our team is reporting the same issue with latest release version. Thanks! Our package json dependencies of FullCalendar: |
One way I found to solve it is to edit the events only synchronously, I mean to have a local state of the events and manipulate them from there |
Thank you, Franco! BTW, I have the synchronous approach working. However, the problem is when syncing the drag and drop event state changes to a call to the backend API call to update the modified data through a confirmation dialog when the user has dropped a recurring (both instance or series) or a non-recurring event. Our goal is to use build something akin to the demo shown here (https://clickermonkey.github.io/dayspan-vuetify/example/) but using FullCalendar.io and React. The wider community of FullCalendar React users will greatly benefit from such as example as most examples are too trivial to use for any real world implementation. Any pointers and suggestions are much appreciated. Thanks again! |
I don't know if it helps, but a while ago I made a project with fullcalendar and the only way I found to solve this problem of synchronizing the data with the backend is to have two states, one local and one in the backend, the data that is already in backend should only be used in frontend initialization, then when I add/modify/remove events I make calls to the backend to update the state there, but when I update the state in the frontend I don't use the state returned by the backend, instead I use the local state parallel to that of the backend. It is difficult to explain it but I leave you the link of the repo so you can get a better idea https://github.com/FrancoRodao/MERN-Calendar I used redux to have the local state in frontend, but I think session/local storage would work fine too |
|
Thank you, Franco! This was indeed an approach that our team tried, but the coordination to manage parallel states and the code required to manage these states (including handling exceptions that come from the server) made this a bit unwieldy for us to implement. Have a wonderful day!
|
|
This problem has been fixed in v6.1.3 Updated repro and ported to stackblitz: In order to prevent this bug, developers are responsible for the following:
I plan to add this to official docs very soon. |
Reduced Test Case
https://codesandbox.io/s/zealous-jepsen-190d2?file=/src/DemoApp.jsx
Bug Description
If I press down on an event, move it, release the mouse button, press the mouse button again,
-> can drag a copy of the event
Screenshots
From the minimal working example
In the app, with some more hooks/delay it works close to every time. The title is rendered as the title is calculated in
eventDidMountThe text was updated successfully, but these errors were encountered: