[SOLVED] React-big-calendar passing events from firebase

Issue

This Content is from Stack Overflow. Question asked by Yohannes Misganaw

I been trying to make react-big-calendar that events stored in firebase. But I struggled to pass the event to the calendar.

import React, { useRef, useState, useEffect } from "react";
import format from "date-fns/format";
import getDay from "date-fns/getDay";
import parse from "date-fns/parse";
import startOfWeek from "date-fns/startOfWeek";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import "react-big-calendar/lib/css/react-big-calendar.css";
import "react-datepicker/dist/react-datepicker.css";
import { auth, db } from "../../../firebase";
import { collection, onSnapshot, query, where } from "@firebase/firestore";

const Timetable = () => {
  const locales = {
    "en-US": require("date-fns/locale/en-US"),
  };
  const localizer = dateFnsLocalizer({
    format,
    parse,
    startOfWeek,
    getDay,
    locales,
  });

  const [events, setEvents] = useState();

  useEffect(
    () =>
      onSnapshot(
        query(
          collection(db, "Time table"),
          where("uid", "==", auth.currentUser.uid)
        ),
        (snapshot) => setEvents(snapshot.docs)
      ),
    []
  );


  return (
      <div className="pb-2 flex-1 h-screen overflow-y-scroll">
        <div>
          {events &&
            events.length > 0 &&
            events.map((item) => (
              <Calendar
                localizer={localizer}
                events={[
                  {
                    title: item.data().title,
                    allDay: false,
                    start: new Date(item.data().start?.toDate()).toUTCString(),
                    end: new Date(item.data().end?.toDate()).toUTCString(),
                  },
                ]}
                startAccessor="start"
                endAccessor="end"
            
              />
            ))}
        </div>
      </div>
  );
};

export default Timetable;

After I did this It works but when ever it have it have more event it will create another calendar. I know it does that b/c I’m passing the data inside the mapping. Is there any way that I can pass the event data to the calendar?

Solution by Gino Llerena

You have to change this part:

components={{
     event: <EventComponent />
   }}
 

with this:

 components={{
     event: EventComponent
   }}
 


This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 4.0.

people found this article helpful. What about you?