CODEWITHSUNDEEP
angulartypescriptfullcalendarobservable
Taldorr
Taldorr

Reputation: 195

Angular Fullcalendar does not refresh events

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;

Upvotes: 2

Views: 4709

Answers (1)

Taldorr
Taldorr

Reputation: 195

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.

Upvotes: 2

Related Questions