带有Angular 4的Ionic3中的FullCalendar

Question

How can I initialize fullCalendar in an event (for example, click) on Ionic 3, and with Angular 4?

This code work when set calendar options in variable:

 calendarOptions: Object = {
    fixedWeekCount: true,
    editable: true
  };

But when I call into a function, don't work:

 buildCalendar(): void{
  this.calendarOptions: Object = {
    fixedWeekCount: true,
    editable: true
  };
 }

Html code where the calendar is called

<angular2-fullcalendar 
          [options]="calendarOptions" 
          (initialized)="onCalendarInit($event)"></angular2-fullcalendar>

Angular code where buildCalendar is called:

getAging(): void {

    this.myProvider.getAging()
      .subscribe(
      (response) => {
//do something...
      }, (error) => {
        console.log(`Backend returned code ${error.status}, body was: ${error.error}`);
      }, () => {
        console.log('aging complete');
        this.buildCalendar();
      }
      )

  }

PS: getAging() is called, on page load.

And I need initialize fullCalender, after load data from backend (API).

Answer 1

The issue is specific not to FullCalendar in general but to particular angular2-fullcalendar component and the way it works.

If it refers to this one , the problem is clear; it doesn't watch for options input and uses setTimeout hack to cover initial changes in the input (and 100 ms delay is unwanted here).

Since the component is really simple, it's beneficial for the first party to implement it according to its needs instead of relying third-party solution.

For this particular component ngIf should be used. It helps to prevent the component from being compiled until options are ready:

<angular2-fullcalendar *ngIf="calendarOptions"
          [options]="calendarOptions" 
          (initialized)="onCalendarInit($event)"></angular2-fullcalendar>