Full Calendar Not Showing Events Coming From Firebase Firestore in reactjs

user_15197645 0
Viewed 120

I am using the package @fullcalendar/react to create a calendar in my admin dashboard website. What I want is to allow admins to add events and they would show up in the full calendar from the firebase firestore database.

But when I fetch my events collection it just displays nothing in the calendar.

What am I doing wrong? Why are the events not showing up?

Here is the console log of my eventsData Array.

enter image description here

Here is my code:

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import BootstrapTheme from "@fullcalendar/bootstrap";
import firebase from '../../firebase';

const Calender = props => {

 const [eventsData, setEventsData] = useState({})

 const getEventsData = async () => { 
    await firebase.firestore().collection("Events").get().then((snapshot) => {
      const events = snapshot.docs.map(event => event.data());
      setEventsData(events)
      console.log(events)
    }).catch((e) => {
      console.log(e + "fetching error")
    })
  }

 useEffect(() => {
    getEventsData()
  },[])


       return(

                   <FullCalendar
                        plugins={[
                          BootstrapTheme,
                          dayGridPlugin,
                          interactionPlugin,
                        ]}
                        slotDuration={"00:15:00"}
                        handleWindowResize={true}
                        themeSystem="bootstrap"
                        headerToolbar={{
                          left: "prev,next today",
                          center: "title",
                          right: "dayGridMonth,dayGridWeek,dayGridDay",
                        }}
                        events={eventsData}
                        editable={true}
                        droppable={true}
                        selectable={true}
                   
                      />

              )
            }
google-cloud-firestore firebase reactjs fullcalendar javascript
1 Answers

The problem with my code was that I was using and async function to get my data and that was not making the data to be shown. removing the async/await fixed the issue.

const getEventsData = () => { 
    firebase.firestore().collection("Events").get().then((snapshot) => {
      const events = snapshot.docs.map(event => event.data());
      setEventsData(events)
      console.log(events)
    }).catch((e) => {
      console.log(e + "fetching error")
    })
  }
user_151976450
Related