Angular2 Implementing the FullCalendar Scheduler with PrimeNG-Scheduler

Question

FullCalendar has an add-in called Scheduler, which I am trying to use with the PrimeNG-Schedule component. Looking at PrimeNG docs, there is a “options” property that I can use to send arbitrary information to FullCalendar. This works, but when I connect to the data retrieval in the asynchronous API, it causes problems.

The API uses Observables, which are then signed in the component. This is great for events, as the view is automatically updated when events change.

However, when FullCalendar is supplied with “resources” using the options PrimeGG property, everything does not work as expected, because the code for setting the “options” property is run before the API call has the opportunity to return and is therefore empty.

I am sure of this, because if I program resources hard, everything works.

I can think of several ways to fix the problem:

• Make calls synchronous (I would like to avoid this)

• Wait for all the data to be downloaded and then (re) display the view (this is almost the same as # 1)

• Set the options.resources property so that when it changes, the view is updated, as for events (this is the best option, but not sure if this is possible)

I would appreciate any help. Thanks.

<p-schedule [events]="events" [businessHours]="businessHours" [options]="optionConfig" > </p-schedule> 

My (currently) dummy API

 getEvents() { return this.http .get('assets/api/mockEvents.json') .map((response : Response) => <Appointment[]>response.json().data) .catch(this.handleError); } getResources() { return this.http .get('assets/api/mockResources.json') .map((response : Response) => <Resource[]>response.json().data) .catch(this.handleError); } 

Component file

 ngOnInit() { this.schedulerService.getEvents() .subscribe(events=> this.events = events); this.schedulerService.getResources() .subscribe(resources => this.resources = resources); // ***** If the following code is uncommented, resources are displayed in Schedule view **** // this.resources = [ // new Resource(1, "Dr. Hibbert", "blue", true, new BusinessHours("08:00", "16:00")), // new Resource(2, "Dr. Simpson", "green", true, new BusinessHours("10:00", "18:00")) // ]; this.optionConfig = { "resources": this.resources } } 

Edit: One thing I was thinking about is setting the this.resources property only with the setter method. This way, I know exactly when the value is being set, but the problem remains, how can I click on the new value to schedule the component after it is initialized.

Answer 1

I understood!

Using *ngIf to delay component rendering until this.resources has data. I added a new boolean value isDataAvailable , the default value is false. Then this.schedulerService.getResources() sets true only after returning the API call, after which I also set the resources property to optionConfig

 ngOnInit() { this.loadResources(); } private loadResources() { this.schedulerService.getResources() .subscribe( resources => { this.resources = resources; this.optionConfig['resources'] = this.resources; this.isDataAvailable = true; } , error => console.log(error) ); } 

Template:

 <div *ngIf="isDataAvailable; else elseBlock"> <p-schedule [events]="appointments" [options]="optionConfig" (onDayClick)="handleDayClick($event)" (onEventClick)="handleEventClick($event)" (onViewRender)="loadAppointments($event)"> </p-schedule> </div> <ng-template #elseBlock>Loading....</ng-template> 

Answer 2

PS: I can not reproduce your problem, so I suggest you without tested

you can use asynch pipe from angular2 to get a view of the load as soon as the data is as shown in the part

 <p-schedule [events]="events" [businessHours]="businessHours" [options]="optionConfig | async" > </p-schedule> 

or even you can directly assign a resource using an asynch pipe instead of packing in optionConfig if appropriate.

so you don’t need to make a synchronous call and don’t need to re-view the view after loading the data.

if there is still a problem, let me know.