im fetching fullcalendar events from a firebase cloud function within an Angular (7) App like this:
eventSources: [
{
events: (info, successCallback, failureCallback) => {
this.http
.get(
BACKEND_URI + '?start=' + info.start + '&end=' + info.end
)
.subscribe((events: CalendarEvent[]) => {
localStorage.setItem('CalendarEventStore', JSON.stringify(events));
successCallback(events);
}, error => {
console.error(error);
failureCallback(error);
});
}
}
],
(I'm using my own get function mainly to add authorization headers via interceptor).
As you can see, im saving the received events in the localStorage to make them available for the next time the calendar is requested. This is mainly for times when there's no internet connection, since its supposed to be usable as a PWA, but also firebase cloud functions seem to be terribly slow so it would be nice to show the events from the storage while loading the new ones. The Problem arise with loading the saved events. I tried adding them in as a second eventSource, like this:
eventSources: [
{
// code above..
},
{
events: JSON.parse(localStorage.getItem('CalendarEventStore')) || {}
},
],
The idea was to delete the second eventSource as soon as the first calls back, so there wouldn't be duplicates. But the second eventSource will only be shown as soon as the first is completed, when all successCallbacks were made, so no time is saved here.
Since this seems like a very basic problem that a lot of people might be facing: Does anyone have an idea / solution on how to implement that?
