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.