CODEWITHSUNDEEP
angularobservablefullcalendar-5
Frank Jusnes
Frank Jusnes

Reputation: 185

FullCalendar in Angular

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>

Upvotes: 3

Views: 1159

Answers (2)

leonmain
leonmain

Reputation: 344

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};
  }
);

Upvotes: 1

akotech
akotech

Reputation: 2274

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

Upvotes: 3

Related Questions