Angular Fullcalendar does not refresh events

Question

I'm trying to use fullcalendar with angular.

Even though valid events are added to my events field, they don't show up in the UI. Hard coded events are shown. As I'm quite new to angular, so the error might not be related to fullcalendar.

export class CalendarComponent {
  constructor() {}

  events: EventInput[] = [];

  calendarOptions: CalendarOptions = {   
    events: this.events,
    initialView: 'timeGridWeek',
    initialDate: Date.now(),
    locale: 'de',
    nowIndicator: true,
    themeSystem: 'bootstrap',
  };
  
  async onAddEvent() {
    const modalRef = this.modalService.open(NewEventComponent);
    const newShift: Shift = await modalRef.result;
    if (!newShift) return;
    this.events.push(newShift);
  }
}

This is the according .html

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

I figured out that resetting events and calendarOptions.events does work, is it possible that angular does not recognise the change? What is the correct way? (see below)

 this.events = [newShift];
 this.calendarOptions.events = this.events;

Answer 1

If anyone stumbles upon this:

It had nothing to do with fullcalendar. Instead Angular failed to recognise to detect the change. According to this answer, resetting the events and calenderOptions.events solved it.