FullCalendar in Angular

Question

Could anyone please explain to me what I'm doing wrong in the http get statement below? I'm trying to populate FullCalendar events dynamically, but no events are added. The service appears to be returning the same result as the "of". The runnable code is available here: https://stackblitz.com/edit/angular-ivy-1kat2n?file=src/app/app.component.ts

export class AppComponent implements OnInit {
  events1 = [];
  events2 = [];
    
  calendarOptions1 = {
    ...
    events: this.events1,
  };

  calendarOptions2 = {
    ...
    events: this.events2,
  };
  constructor(public http: HttpClient) {}

  ngOnInit() {
    of([
      {"title":"event 1","start":"1900-01-02T11:00:00","end":"1900-01-02T12:00:00"},
      {"title":"event 2","start":"1900-01-02T11:00:00","end":"1900-01-02T12:00:00"}])
      .subscribe((res) => {
        Object.assign(this.events1, res);
      }
    );

    this.http.get('https://mocki.io/v1/f7cdb3b1-5572-4503-9d61-a1671432d08b')
      .subscribe(data => {
        Object.assign(this.events2, data);
      }
    );
  }
}

This is my HTML:

<full-calendar [options]="calendarOptions1"></full-calendar>
<full-calendar [options]="calendarOptions2"></full-calendar>

score 3 · Accepted Answer · answered Jan 30 '22 at 18:09

Extracted from FullCalendarDocs-Angular

If you want to modify options that are complex objects, like headerToolbar or events, you’ll need to make a copy of the object, make your change, and then reassign it. If you DO NOT want to do this, you can have the angular connector recursively search for changes within your objects, though this comes at a slight performance cost. Set the deepChangeDetection prop to "true"

So you have two options:

Reassign calendarOptions.events directly:

this.http.get('https://mocki.io/v1/f7cdb3b1-5572-4503-9d61-a1671432d08b')
 .subscribe(data => this.calendarOptions2.events = data);

Or set the deepChangeDetection to true:

<full-calendar [options]="calendarOptions2" [deepChangeDetection]="true"></full-calendar>

As stated in the docs, bear in mind that the second option may have an impact in app performance.

NOTE: The of() version works, because it gets process synchronously, so the full calendar gets initialize with the valid data. As a test, if you configure the of to be run with the asyncScheduler of([...], asyncScheduler), you can see that it also stops working.

cheers

Thanks! This was a very helpful explanation! – Frank Jusnes Jan 30 '22 at 18:20 — Frank Jusnes, Jan 30 '22 at 18:20

score 1 · Answer 2 · answered Jan 30 '22 at 18:10

According to component documentation:

If you want to modify options that are complex objects, like headerToolbar or events, you’ll need to make a copy of the object, make your change, and then reassign it. If you DO NOT want to do this, you can have the angular connector recursively search for changes within your objects, though this comes at a slight performance cost. Set the deepChangeDetection prop to "true":

<full-calendar deepChangeDetection="true" [options]="calendarOptions">

So you can either pass that property

[deepChangeDetection]="true"

or recreate the object

this.http.get('https://mocki.io/v1/f7cdb3b1-5572-4503-9d61-a1671432d08b')
  .subscribe(data => {
    Object.assign(this.events2, data);
    this.calendarOptions2 = {...this.calendarOptions2, events: data};
  }
);

Thanks, your answer is also spot on. – Frank Jusnes Jan 30 '22 at 18:24 — Frank Jusnes, Jan 30 '22 at 18:24

FullCalendar in Angular

2 Answers2