Angular 11 : How to refetch (when events are changed from backEnd) Events in Fullcalendar V5?

Question

I am working on "@fullcalendar/angular": "^5.5.0",

I am unable to rerender the events that are subscribed from an API call. I searched everywhere but, nothing is working... Please help..

Here is the code:

calendar.component.html

  <full-calendar #calendar [options]="calendarOptions"></full-calendar>

calendar.component.ts

  events = [];

  calendarOptions: CalendarOptions = {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    initialView: 'dayGridMonth',
    initialEvents: this.events, // How to render calendar when events changes???
    weekends: true,
    // events: this.events,
    // lazyFetching: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    select: this.handleDateSelect.bind(this),
    eventClick: this.handleEventClick.bind(this),
    eventsSet: this.handleEvents.bind(this)

  };

  ngOnInit(): void {
    this._calendarService.onDataChanged.subscribe(res => {
      this.events = res;
    });
}

Final call: How to render the calendar when events change???

Answer 1

When I used full-calendar I fetched events not through options but like this:

<full-calendar [events]="calendarEvents">
</full-calendar>

It worked.