Search code examples
angulartypescriptgoogle-cloud-firestorefullcalendarangularfire

Fullcalendar events data from firestore not showing


I am trying to load data from Firestore to display in Fullcalendar in an angular app. But the data is not showing, when I hard code the event data, it shows.

interface for the calendar events.

export interface Events {
  allDay: boolean;
  className?: string;
  end: Date;
  start: Date;
  title: string;
  url?: string;
  description: string;
  icon?: string;
}

Inside the calendar.component.ts

  calendarevent: Events[] = [];
  constructor(db: AngularFirestore) {
   db.collection('events').get().forEach(collection => {
      collection.forEach(events => {
        return calendarevent.push(events.data());
      });
    });
   
}


ngOnInit() {

    this.calendarOptions = {
      plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
      editable: true,
      droppable: true,
      dragScroll: true,
      timeZone: 'GMT',
      events: this.calendarevent,
      
      headerToolbar: {
        left: 'title,prev,next',
        center: 'dayGridMonth,timeGridWeek,timeGridDay',
        right: 'today'
        // left: 'prev,next today ]',
        // center: 'title',
        // right: 'dayGridMonth'
      },


      dateClick: this.handleDateClick.bind(this),
      eventClick: this.handleEventClick.bind(this),
      eventDragStop: this.handleEventDragStop.bind(this)
    };

    // this.fullcalendar.on('dateClick', () => {
    //   this.openDialog();
    // });
  }

Firestore data in the console

[]
0: {className: "event-azure", allDay: true, start: t, title: "BD-pro Launch"}
1: {icon: "circle", start: "2019-07-07", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", title: "Barber", className: "fc-bg-default", …}
2: {end: "2019-09-14", icon: "birthday-cake", start: "2019-09-13", title: "Birthday", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", …}
3: {start: t, allDay: false, end: t, className: "event-azure", title: "Birthday Party"}
6: {description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", end: "2019-08-15", start: "2019-08-13", className: "fc-bg-blue", icon: "calendar", …}
7: {start: "2019-12-29T11:30:00", allDay: false, end: "2019-12-29T012:30:00", icon: "medkit", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", …}
8: {title: "Dinner", icon: "cutlery", end: "2019-11-15T22:30:00", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", start: "2019-11-15T20:00:00", …}
9: {start: "2019-08-08T14:00:00", className: "fc-bg-deepskyblue", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", end: "2019-08-08T20:00:00", title: "Flight Paris", …}
10: {end: "2019-12-27", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", className: "fc-bg-default", start: "2019-12-27", icon: "rocket", …}
11: {className: "event-red", title: "Lunch", end: t, start: t, allDay: false}
12: {title: "Meeting", start: "2019-08-12", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", icon: "suitcase", className: "fc-bg-lightgreen"}
13: {description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", icon: "glass", end: "2019-10-15T11:45:00", title: "Restaurant", start: "2019-10-15T09:30:00", …}
14: {end: "2019-08-25", title: "Shooting", className: "fc-bg-blue", icon: "camera", description: "Lorem ipsum dolor sit amet, consectetur adipiscing…s ac nulla eget, pellentesque pellentesque magna.", …}
15: {start: "2019-07-10T13:00:00", icon: "group", allDay: false, end: "2019-07-10T16:00:00", title: "Team Meeting", …}
16: {title: "Birthday Party", allDay: false, end: t, start: t, className: "event-azure"}
17: {title: "Flight Paris", start: "2019-08-08T14:00:00", end: "2019-08-08T20:00:00", icon: "cog", allDay: false, …}
18: {end: t, title: "Birthday Party", className: "event-azure", allDay: false, start: t}
length: 19
__proto__: Array(0)

Hard Code event data

 events: [
          {
            title: 'All Day Event',
            start: new Date(y, m, 1),
            className: 'event-default'
          },
          {
            title: 'Meeting',
            start: new Date(y, m, d-1, 10, 30),
            allDay: false,
            className: 'event-green'
          },
          {
            title: 'Lunch',
            start: new Date(y, m, d+7, 12, 0),
            end: new Date(y, m, d+7, 14, 0),
            allDay: false,
            className: 'event-red'
          },
          {
            title: 'BD-pro Launch',
            start: new Date(y, m, d-2, 12, 0),
            allDay: true,
            className: 'event-azure'
          },
         
        ]

When I bind the hardcoded events to the Fullcalendar events, it works fine, but the data from Firestore is not working.


Solution

  • So I found a workaround, but I think there is a better solution other than this, I figured out the Calendar is rendered before the data finish loading, so I gotta wrap the calendar function with setTimeOut to delay it,

      calendarEvents: Observable<Events[]>;
      private eventCollection: AngularFirestoreCollection<Events>;
     calendarevent: Events[] = [];
    
      constructor(db: AngularFirestore) {
    
        this.eventCollection = db.collection<Events>('events');
        this.calendarEvents = this.eventCollection.valueChanges();
        this.calendarEvents.subscribe(a => {
          a.map(b => {
            this.calendarevent.push(b);
          });
        });
      }
    
      ngOnInit() {
        setTimeout(() =>
          this.calendarOptions = {
            plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
            editable: true,
            droppable: true,
            dragScroll: true,
            timeZone: 'GMT',
            events: this.calendarevent,
            customButtons: {
              myCustomButton: {
                text: 'custom!',
                click() {
                  alert('clicked the custom button!');
                }
              }
            },
            headerToolbar: {
              left: 'title,prev,next',
              center: 'dayGridMonth,timeGridWeek,timeGridDay',
              right: 'today'
            },
    
    
            dateClick: this.handleDateClick.bind(this),
            eventClick: this.handleEventClick.bind(this),
            eventDragStop: this.handleEventDragStop.bind(this)
          }
    
          , 3000);
      }