diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx
index 0d0da18..a05a38c 100644
--- a/app/routes/events-calendar.tsx
+++ b/app/routes/events-calendar.tsx
@@ -86,7 +86,7 @@ export async function loader({ context }: { context: RequestContext }) {
 export default function () {
   const data = useLoaderData<typeof loader>();
   const [selectedDate, setDate] = useState(new Date());
-  const [eventData, setEventDate] = useState({} as { [k: string]: any });
+  const [eventData, setEventData] = useState({} as { [k: string]: any });
   const { isOpen, onClose, onOpen } = useDisclosure();
   const getEventsOfDay = (date: Date) =>
     data.eventList.filter(
@@ -113,14 +113,14 @@ export default function () {
                 data.memberData.find((m) => m.id === eventData.created_by) as {
                   [k: string]: any;
                 }
-              ).name
+              )?.name
             }
             <br />
-            Event Type: {eventData.type.toUpperCase()}
+            Event Type: {eventData?.type.toUpperCase()}
             <br />
-            Details: {eventData.details}
+            Details: {eventData?.details}
             <br />
-            Answer: {eventData.type === "rotw" ? eventData.answer : "N/A"}
+            Answer: {eventData?.type === "rotw" ? eventData.answer : "N/A"}
           </ModalBody>
           <ModalFooter>
             <Button onClick={onClose}>Close</Button>
@@ -131,6 +131,11 @@ export default function () {
         endAccessor={(event) => new Date(event.end)}
         events={data.calendarData}
         localizer={dayjsLocalizer(dayjs)}
+        onSelectEvent={(e) => {
+          setEventData(
+            data.eventList.find((ev) => ev.id === e.id) as { [k: string]: any },
+          );
+        }}
         onSelectSlot={(s) => {
           const date = s.slots.at(0) as Date;
           setDate(date);