2

I'm wondering how to refresh data in fullCalendar (V4) in Angular (typescript): I have try everything I found on documentation but nothing seems to work properly.

On "SAVE" it all works fine, all the data saves to database properly but after save I would like to reload data (with the id(s) generated from database) and refresh them (reload from zero if it's necessary) to the calendar.

Has anyone tried something similar?

ADyson
  • 57,178
  • 14
  • 51
  • 63
Hammeronthenet
  • 132
  • 2
  • 14
  • Can you provide a minimal [stackblitz](https://stackblitz.com/) to show your problem? – zerocewl Sep 18 '19 at 09:13
  • That's quite difficult, cause in the "background" I've got also NGRX and a real database service (not "on internet" at the moment), – Hammeronthenet Sep 18 '19 at 09:15
  • Maybe you can mock something using [Angular firebase](https://angularfirebase.com/) or just use a datatable to store your content. – zerocewl Sep 18 '19 at 09:18
  • I will try... Not so simple anyway. In the meantime I really appreciate if someone could show me How to reload data (angular/fullcalendar v4) after the array that contains eventsource/events change. – Hammeronthenet Sep 18 '19 at 09:23
  • 1
    Since we can't see how you've set up your event feed into fullCalendar it's really impossible to tell you what you need to do. There are generally 3 strategies you can follow: 1. [events as JSON feed](https://fullcalendar.io/docs/events-json-feed) (most recommended), 2. [events via custom function](https://fullcalendar.io/docs/events-function) (2nd best), or 3. [static array of events](https://fullcalendar.io/docs/events-array) (less flexible, generally not recommended except for very simple cases). Have you adopted one of these three approaches? – ADyson Sep 18 '19 at 09:53
  • 1
    If you have used approach 1. or 2. then whenever you want to tell fullCalendar to refresh the list of events you can simply the [refetchEvents](https://fullcalendar.io/docs/Calendar-refetchEvents) method and it will automatically pull the data from the data source again. But if you supplied a simple list of events then this cannot work, instead you have to manually remove all the events and add a new event source containing the updated list. – ADyson Sep 18 '19 at 09:54
  • 1
    In this [stackblitz](https://stackblitz.com/edit/fullcal-v3-10-0) you can find a minimal example, but its v3! – zerocewl Sep 18 '19 at 09:56
  • Okay, I've got it!!! I used the approach number 3 (cause my datas update in a subcription of an Observable from a NGRX store action). So (wehen I got datas) I do: let evts = this.calendarApi.getEvents(); evts.forEach(element => { element.remove(); }); this.calendarApi.addEventSource(this.mySource); this.calendarApi.rerenderEvents(); I think this is not so elegant... – Hammeronthenet Sep 18 '19 at 09:57
  • I agree. I think approach number 2 might suit you better. You can give fullCalendar a callback containing any functionality you need in order to fetch the events and return them to the calendar. – ADyson Sep 18 '19 at 09:58
  • I see your "stackblitz" comment here only now! Okay, I look at it! Thank you so much !!!!!!!! – Hammeronthenet Sep 18 '19 at 09:59

0 Answers0