[Vuejs]-FullCalender does not display events from Firebase

by

0👍

✅

I’m not a vue user, so the trail is not 100% clear to me, but I suspect the issue may be that you’re initialising the calendar before calling getEvents, and therefore it’s not passing the data to fullCalendar, because fullCalendar ingested events before it was populated. You also have to remember that your firebase query runs asynchronously, so other code on the page won’t wait for it to complete.

Normally, to integrate an event feed with fullCalendar the best way is to provide a dynamic feed, which fullCalendar can then call as and when it needs to fetch events. In your case the events as a function style will be the best, so you can put your request to firebase in the callback function, and then pass the events to fullCalendar (via the additional callback supplied to you) when the asynchronous request returns.

Something like this:

events: function( fetchInfo, successCallback, failureCallback ) { 
  db.collection("MYEVENT")
    .get()
    .then((querySnapshot) => {
      let events = [];
      querySnapshot.forEach((doc) => {
        events.push({
          id: doc.id,
          title: doc.data().title,
          description: doc.data().description,
          start: doc.data().start,
          end: doc.data().end,
          backgroundColor: doc.data().backgroundColor,
        });
      });
      successCallback(events);
    });
}

You then don’t need the const getEvents = () => { etc.

P.S. This pattern also gives you the ability, if you wish, to use the supplied start and end dates to restrict the data you download from firebase to only those events which fall between those dates. This can be more efficient, especially when you have a large database of events after a while, so you don’t download redundant data unnecessarily. If it turns out that the user then changes the date range to another month/week/day outside the initial range, then it simply runs the callback again and supplies new dates, and downloads the extra data from the server.

Leave a comment