"dp.events.update(dpEvent)" sometimes redraw all Events on a Calendar

Asked by Julien
21 days ago.

I have an issue on a specific page and I’m unable to find the cause. On the click of a button, I update the HTML of an Event on a Calendar. Something like:

const dpEvent: DayPilot.Event = dp.events.find((ev) => ev.id() === idToFind);
dpEvent.data.html = dpEvent.data.html + '<span>test</span>';
dp.events.update(dpEvent);

For some reasons, on that specific page, all the Events are redrawn on the Calendar when this code is ran so they all flicker! I have another page where I do something very similar and only the target Event is redrawn (perfect behavior).

Do you have an idea what could cause dp.events.update(dpEvent) to redraw all Events?

Note that it may certainly be something on my side. I’ll do more tests and try to isolate the issue as much as possible but, if you have any idea, it would be appreciated.

Comment posted by Julien
21 days ago.

I just realized that on my other page, where there is not flickering, even the modified Event itself doesn’t flicker… So I guess my issue is not “one Event redraw vs. all Events redraw“ but rather: “Why does the Events flicker in some situations?“.

Answer posted by Julien
21 days ago.

I close my browser, open it again and now it doesn’t flicker anymore! :-|
I guess we’ll never know…

Comment posted by Dan Letecky [DayPilot]
20 days ago.

Great, thanks for the update!

Just FYI, the Calendar always refreshes all events in the viewport when you call events.update(). The reason is that a change of the event properties (start/end) may affect location and size of other events (e.g., if they are overlapping).

This is done in one step and it’s fast enough so the content doesn’t flicker. In some cases (if you use heavy CSS or event content) it may flicker but that is very rare with the current browsers.

Comment posted by Julien
20 days ago.

Thank you for the explanation.

Comment posted by Julien
19 days ago.

I’m having this flickering issue again.

The sad part is that it happens at a time where I only show unmodifiable Events to the users (Events can’t be moved, resized, deleted, added). I do change the HTML of an Event (for a second or two) when an external list is clicked: I then add a visual animation on the Event on the Calendar so the user can see where is the Event associated with the item he clicked on the list.

Could it be possible for “events.update(aSingleEvent)” to not refresh all Events in the viewport if only a property that can not affect other Events has been modified?

Comment posted by Dan Letecky [DayPilot]
18 days ago.

Julien,

In the latest release (2025.4.6676), the Calendar now only updates a single event when events.update() is called, if the change doesn’t affect the location (start, end, resource id). That should help with your scenario.

Comment posted by Julien
17 days ago.

This is really appreciated, it will make a big difference for the experience of my application!

Sadly, I’m unable to reproduce the issue on demand, but I’ll use the new version and I’ll let you know if I still see any similar problems.

Thank you!

Comment posted by Julien
17 days ago.

I can confirm it’s working well!

The modified Event still flickers when this situation occures but it’s way, way better than having all the Events flicker.

"dp.events.update(dpEvent)" sometimes redraw all Events on a Calendar

Products

Learn

Get Support

DayPilot Pro