```import dayjs from 'dayjs'; import { useContext, useEffect, useState } from 'react'; import CalendarContext from '../../Providers/CalendarContext'; import { getShifts } from '../../api/shifts'; const Day2 = ({ day }) => { const [dayEvents, setDayEvents] = useState([]) const { setEventModal, setDaySelected, setEvents, savedEvents, setSelectedEvent, selectedEvent } = useContext(CalendarContext) const [shifts, setShifts] = useState([]) useEffect(() => { getShifts() .then(data => { organizeShiftsByName(data) }) }, []) const organizeShiftsByName = (shifts) => { const groupedShifts = shifts.reduce((acc, shift) => { if (!acc[shift.name]) { acc[shift.name] = []; } acc[shift.name].push(shift); return acc; }, {}); setShifts(groupedShifts); }; console.log(shifts) useEffect(() => { if (day) { const allShifts = Object.values(shifts).flat(); const events = allShifts.filter(evt => dayjs(evt.day).format("DD-MM-YY") === day.format("DD-MM-YY")) setDayEvents(events) } }, [shifts, day]) if (!day) { return; // or any placeholder content } return (

{ setEventModal(true); setDaySelected(day); }} >

{day?.format("DD")}

{day.format("ddd").toUpperCase()}

{dayEvents.map((evt, idx) => (

{ setSelectedEvent(evt) }} className={`${evt.label} p-1 mr-1 text-gray flex text-xs rounded mb-1 truncate`}> {evt.name}

))}

); }; export default Day2;```

Front end layout

Similar Threads

Similar Threads

Similar Threads