Handler for receiving event objects of newly loaded event sources

Checklist

• I’ve already searched through existing tickets
• Other people will find this feature useful

Feature Description

I’m loading several iCalendar eventSources in my FullCalendar instance, and I need to do some computation when one of them in particular has been fully loaded and its events have been added to the calendar. More specifically, I need to get a reference to all the events added from this source.

What I want to achieve is calling…

const loadedEvents = calendar.getEvents().filter(event => event.source?.id === 'MyEventSourceId');

…to get those events as soon as they are available, but without being notified by FullCalendar through the handler I’m looking for, I can reliably execut this statement without it returning an empty array (probably because it’s executed before the events are fully loaded in the calendar).

Sure, I could wrap this with a setTimeout and wait an arbitrary amount of milliseconds, but I’d very much like to not do that 😄

Is there any way to do what I’d like or any workaround this issue?

Thanks!

[Tazaf]

To trigger a function when an event is added through addEvent, you have the eventAdd property that can help you. It does not trigger on events added through eventSources, though (alas). Be aware, that this callback only receive as argument the event that have been added. You’ll need to manually query the calendar for all the other events if you want to manipulate them all.

There’s another property that could be used, although it come with a plethora of pitfalls: the eventSet property. The callback will receive all the events in memory as its only argument. This property will trigger anytime the event data is modified IN ANY WAY, that is if an event is added, removed, updated, or ANYTHING else that mutate the events. I can not stress this enough: be very wary if you decide to try this property, as it is very easy to create infinite loops by accidentally updating a single event during the callback execution, which would trigger it another time, and another time, etc.

FYI, eventSet is the route I’ve taken in my case. It forced me to completely rethink my logic and I’ve added a bunch of conditions in the callback to ensure I could update my events without creating an infinite loop.

Anyway, hope that helps!

[arshaw]

I believe the solution here is to have eventAdd fire when an event object is created, regardless of whether its from addEvent() or from the loading of an event source.

We might want to think about naming it differently (eventLoaded?)

A workaround might be combining setTimeout with eventSourceSuccess and the technique @Tazaf originally posted:

eventSourceSuccess: () => {
  setTimeout(() => {
    const loadedEvents = calendar.getEvents().filter(event => event.source?.id === 'MyEventSourceId');
  })
}

I’d like this ticket to focus solely on obtaining the event objects for newly added event sources. Knowing when they render is a different can of worms. Renaming the ticket appropriately.