0

How do I rerender FullCalendar when subscribed to an event?

BTW, the code below works perfectly. If there is new information, although it does load, it does not get displayed until you refresh the page.

is there a way to make this live & dynamic?

Code below:

this.store.select(fromEvents.selectAll)
   .subscribe(a => {
       this.events = a;
       $('#calendar').fullCalendar( 'rerenderEvent' )
   });

FYI, I've tried the following as well:

$('#calendar').fullCalendar( 'renderEvent', this.events )
$('#calendar').fullCalendar( 'refetchEvent' )

I also follow this post below:

rerenderEvents / refetchEvents problem

the code below works almost perfectly. It feels live & dynamic... but I am unable to delete

this.store.select(fromEvents.selectAll)
   .subscribe(a => {
       this.events = a;
       $('#schedule').fullCalendar('removeEvents');
       $('#schedule').fullCalendar('addEventSource', a);
       $('#schedule').fullCalendar('rerenderEvents');
   });

Technically speaking, should the code below be able to render whatever is in the array?

$('#calendar').fullCalendar( 'refetchEvent' )

Thanks all for the help in advance

Jose
  • 370
  • 1
  • 4
  • 14
  • Neither of those methods "rerenderEvent" or "refetchEvent" exist in fullCalendar. Check https://fullcalendar.io/docs/. They are both plural. Since an event source must return an array containing one or more events, it makes no sense (and there is no way) to re-fetch a single one - it's not within fullCalendar's control - you just get back whatever the source decided to return – ADyson Jan 14 '18 at 11:19
  • Anyway the calendar only refreshes the events if you change the view or the date, or call refetchEvents explicitly. And even then it only does it if you define a dynamic data source (and not a JS static array) as per https://fullcalendar.io/docs/event_data/events_json_feed/ or https://fullcalendar.io/docs/event_data/events_function/). If you passed the events in as a static array (it's not fully clear from your incomplete code snippets, but it looks like maybe you did) then fullCalendar has no way to know how to refresh them, you need to give it a URL, or a function it can re-run. – ADyson Jan 14 '18 at 11:23
  • Thanks for the info @ADyson. I am currently subscribing to an event from the NGRX store. Anytime there are changes, the array updates dynamically. I tried calling `$('#calendar').fullCalendar( 'refetchEvents' )` within the subscription in hopes that it would refresh everything, but it doesn't seem to do so. – Jose Jan 14 '18 at 15:17
  • I don't know what NGRX is, but anyway... "the array updates dynamically." Not to fullCalendar it doesn't. fullCalendar made a copy of it. You're updating a different copy. Make a function to give to fullCalendar as per https://fullcalendar.io/docs/event_data/events_function/ and within it, fetch the data from NGRX store. FullCalendar can then run that function every time it needs to fetch the events. – ADyson Jan 14 '18 at 16:13
  • Thanks @ADyson, I'll give it a shot. I'll repost once complete – Jose Jan 14 '18 at 23:24
  • No problem, if you fix it, remember to post it in the answer section, don't over-write your question :-) – ADyson Jan 15 '18 at 06:45

0 Answers0