diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx
index 75548ae..867b61a 100644
--- a/app/routes/events-calendar.tsx
+++ b/app/routes/events-calendar.tsx
@@ -50,17 +50,13 @@ export async function loader({ context }: { context: RequestContext }) {
     });
 
   const calendarData = eventsData.results.map((e) => {
-    const dayDate = new Date(
-      e.year as number,
-      (e.month as number) - 1,
-      e.day as number,
-    );
     return {
       id: e.id,
       title: (e.type as string).toUpperCase(),
       allDay: true,
-      start: dayDate,
-      end: dayDate,
+      // A Date object will not survive being passed to the client
+      start: `${e.year}-${e.month}-${e.day}T00:00:00.000Z`,
+      end: `${e.year}-${e.month}-${e.day}T00:00:00.000Z`,
     };
   });
 
@@ -86,11 +82,13 @@ export default function () {
   return (
     <Container maxW="container.lg" h="600px">
       <Calendar
+        endAccessor={(event) => new Date(event.end)}
         events={data?.calendarData}
         localizer={dayjsLocalizer(dayjs)}
         onSelectSlot={(s) => {
           setDate(s.slots.at(0) as Date);
         }}
+        startAccessor={(event) => new Date(event.start)}
         style={{ height: 500 }}
       />
       <Accordion id="events-accordion" mt="16px">