Angular-calendar: Example for dynamic loading for events

[kianliang-iium]

Great library!
The examples given are static events. Is there an example of loading events from server, e.g, using firebase?

[mattlewis92]

The best way would be to make use of observables and the async pipe.

Based off the angular fire readme: https://github.com/angular/angularfire2

this.events$ = af.database.list('/events').map(event => {
  // add any extra event metadata here, rename properties to the format the calendar expects etc
  return event;
});

and then in your template:

[events]="events$ | async"

Hope that helps!

[ogix]

I am getting this error when passing events asynchronously (like in your example): "Cannot read property 'filter' of null at getEventsInPeriod". When I debugged I noticed that ngOnChanges of the lib was triggered and events value was null so that caused the error. So I guess null value of events is passed before real data comes.

[ogix]

This workaround works: [events]="(events | async) || []"

[kianliang-iium]

I'm a noob in AngularFire2. How do you setup -> events: CalendarEvent[] with FirebaseListObservable

[ogix]

I guess you should declare your variable as events$: FirebaseListObservable<CalendarEvent[]> and then assign af database observable to it as in the @mattlewis92 example. In map function you transform from your definition to CalendarEvent:

        this.events$ = af.database.list('/events').map(events => {
            return events.map(e => {
                return {
                    title: e.name,
                    start: e.date,
                    color: colors.red
                };
            });
        });

[Stevan0102]

Hi, I was trying to use this async thing, but faced some problem here, any chance you guys can help:
http://stackoverflow.com/questions/41787442/angular2-split-elements-in-observable-to-fit-async-pipe

Much appreciated

[kianliang-iium]

Hi. Thanks to all the previous comments, I managed to get it working like this. In your ts file:

export class HomePage {
events: FirebaseListObservable

constructor (public af: AngularFire) {
this.events = af.database.list('/events').map( events => {
return events.map( e => {
return {
title: e.name,
start: e.start,
color: colors.red
}
})
}) as FirebaseListObservable }
}

In your html file:
[events]="(events | async) || []">