Connect calendar events to UserEventDetail and AdminEventDetail

[hnadrian]

For this issue, we want to have events on calendars once clicked to show either the UserEventDeail or AdminEventDetail component based on the admin boolean prop. admin prop should be part of the Calendar Component already.

1. Set at least these 2 states (if not done already) selectedEventId, detailModalOpen (false as the default value).
2. Set click event handler for the events in the calendar to do the following:

• Set the state variable selectedEventId to the ID of the clicked event.
• Set the state variable detailModalOpen to true (when this state is true, the modal becomes visible on the screen).

3. Set up the Chakra UI modal component:

• Quick read on instructions and examples (https://chakra-ui.com/docs/components/modal).
• Configure the modal with isOpen={detailModalOpen}. This links the modal's visibility to the detailModalOpen state.

4. Inside the modal, implement conditional rendering logic

• If admin is true, render the AdminEventDetail component.
• If admin is false, render the UserEventDetail component.
  Make sure to pass selectedEventId as a prop to the rendered component to display details of the correct selected event.

5. Test and make sure that the modal pops up for all events on the calendar, and that manually changing the admin prop value renders the correct corresponding component.