Implementing FullCalendar-Scheduler with PrimeNG-Scheduler

[harinder]

Hello!

FullCalendar has an add-on called Scheduler which I am trying to use with PrimeNG-Schedule component. Looking at the PrimeNG docs, there is an 'options' property that I can use to send arbitrary information to FullCalendar. This does work but when I hook up to data retrieval to an async API, it causes issues.

== Details ==>
The API uses Observables which I then subscribe to in the component. This works fine for Events as the view gets updated automatically when events are changed.

However, when supplying the FullCalendar with 'resources' via the PrimeNG 'options' property, things don't work as expected because the code to set the 'options' property is run before the API call has a chance to come back and is thus empty.

I am sure of this because if I hard-code the resources, things work.

I can think of a few ways to remedy the issue:
1. Make the calls synchronous (would like to avoid this)
2. Wait for all data to load and then (re)render the view (makes this almost the same as #1)
3. Configure the options.resources property such that when it changes, the view gets updated, just like it does for events (this is the best option but not sure if it's even possible)

I would appreciate any help. Thank you.


Code snippets follow.

==scheduler.component.html ==>

Code: Select all

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

==scheduler.component ==>

Code: Select all

ngOnInit() {

  this.schedulerService.getEvents()
      .subscribe(events=> this.events = events);

      this.schedulerService.getResources()
      .subscribe(resources => .resources = resources);
      // ***** If the following code is uncommented, resources are displayed in Schedule view ****
	// this.resources = [
	//     new Resource(1, "Dr. Singh", "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
      }

== scheduler.service (API) ==>

Code: Select all

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

[nikosce]

I am facing the same problem. Does anyone have Full Calendar Scheduler working with the PrimeNG templates?

Thanks!
Tim

[maiksch]

Don't know if this is still relevant or not, but if somebody finds this here is the answer to OP's question:

First, specify a function where you load your resources asynchronously in your options:

Code: Select all

this.options =  {
      ...
      resources: (callback) => this.fetchResources(callback),
      ...
};

Then implement that function:

Code: Select all

fetchResources(callback: Function) {
   this.resourcesLoading = true;
   this.loadAllResources().subscribe(
        resourceItems => callback(resourceItems)
   );
}

The callback function needs to be called with your list of resources. The Schedular will then take care of putting the resources into the calendar.

Also you can always refetch your resources with the following line:

Code: Select all

@ViewChild('fullcalendar') public fullcalendar: Schedule;

this.fullcalendar.schedule.fullCalendar('refetchResources');