diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx index 0a13915..ace4020 100644 --- a/app/routes/events-calendar.tsx +++ b/app/routes/events-calendar.tsx @@ -70,15 +70,14 @@ export async function loader({ context }: { context: RequestContext }) { export default function () { const data = useLoaderData(); const [selectedDate, setDate] = useState(new Date()); - - const eventsOfDay = () => { - return data.eventList.filter( + const getEventsOfDay = (date: Date) => + data.eventList.filter( (e) => - e.day === selectedDate.getUTCDate() && - e.month === selectedDate.getUTCMonth() + 1 && - e.year === selectedDate.getUTCFullYear(), + e.day === date.getUTCDate() && + e.month === date.getUTCMonth() + 1 && + e.year === date.getUTCFullYear(), ) as { [k: string]: any }[]; - }; + const [eventsOfDay, setEventsOfDay] = useState(getEventsOfDay(selectedDate)); dayjs.extend(utc); @@ -89,15 +88,12 @@ export default function () { events={data.calendarData} localizer={dayjsLocalizer(dayjs)} onSelectSlot={(s) => { - setDate(s.slots.at(0) as Date); + const date = s.slots.at(0) as Date; + setDate(date); + setEventsOfDay(getEventsOfDay(date)); }} popup - startAccessor={(event) => { - const date = new Date(event.start); - date.setUTCDate(date.getUTCDate() + 1); - - return date; - }} + startAccessor={(event) => new Date(event.start)} style={{ height: 500 }} views={{ month: true, @@ -118,7 +114,7 @@ export default function () { - {eventsOfDay().find((e) => e.type === "fotd")?.details || "None"} + {eventsOfDay.find((e) => e.type === "fotd")?.details || "None"}
@@ -132,8 +128,7 @@ export default function () { - {eventsOfDay().find((e) => e.type === "gamenight")?.details || - "None"} + {eventsOfDay.find((e) => e.type === "gamenight")?.details || "None"} @@ -145,7 +140,7 @@ export default function () { - {eventsOfDay().find((e) => e.type === "rotw")?.details || "None"} + {eventsOfDay.find((e) => e.type === "rotw")?.details || "None"} @@ -157,7 +152,7 @@ export default function () { - {eventsOfDay().find((e) => e.type === "qotd")?.details || "None"} + {eventsOfDay.find((e) => e.type === "qotd")?.details || "None"}