[#197] added missing infos

src/components/Calendar/Calendar.tsx

@@ -3,7 +3,6 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { CalendarApi, DateSelectArg } from "@fullcalendar/core";
-import ReactCalendar from "react-calendar";
 import "./Calendar.styl";
 import "./CustomCalendar.styl";
 import { useEffect, useRef, useState } from "react";
@@ -330,25 +329,39 @@ export default function CalendarApp({
             filteredTempEvents,
             userId
           )}
-          weekNumbers
+          weekNumbers={
+            currentView === "timeGridWeek" || currentView === "timeGridDay"
+          }
           weekNumberFormat={{ week: "long" }}
           weekNumberContent={(arg) => {
-            const showSelector =
-              currentView === "timeGridWeek" || currentView === "timeGridDay";
             return (
               <div className="weekSelector">
                 <div>{arg.text}</div>
-                {showSelector && (
-                  <TimezoneSelector
-                    value={timezone}
-                    onChange={(newTimezone: string) =>
-                      dispatch(setTimeZone(newTimezone))
-                    }
-                  />
-                )}
+                <TimezoneSelector
+                  value={timezone}
+                  onChange={(newTimezone: string) =>
+                    dispatch(setTimeZone(newTimezone))
+                  }
+                />
               </div>
             );
           }}
+          dayCellContent={(arg) => {
+            const month = arg.date.toLocaleDateString("en-US", {
+              month: "short",
+            });
+            if (arg.view.type === "dayGridMonth") {
+              return (
+                <span
+                  className={`fc-daygrid-day-number ${
+                    arg.isToday ? "current-date" : ""
+                  }`}
+                >
+                  {arg.dayNumberText === "1" ? month : ""} {arg.dayNumberText}
+                </span>
+              );
+            }
+          }}
           slotDuration={"00:30:00"}
           slotLabelInterval={"01:00:00"}
           scrollTime="12:00:00"

src/components/Calendar/handlers/eventHandlers.ts

@@ -5,6 +5,7 @@ import { Calendars } from "../../../features/Calendars/CalendarTypes";
 import { getDeltaInMilliseconds } from "../../../utils/dateUtils";
 import {
   getCalendarDetailAsync,
+  getEventAsync,
   putEventAsync,
   updateEventInstanceAsync,
   updateEventLocal,
@@ -97,6 +98,21 @@ export const createEventHandlers = (props: EventHandlersProps) => {
       window.open(info.event.url);
     } else {
       setOpenEventDisplay(true);
+      if (
+        calendars[info.event.extendedProps.calId] &&
+        calendars[info.event.extendedProps.calId].events[
+          info.event.extendedProps.uid
+        ]
+      ) {
+        dispatch(
+          getEventAsync(
+            calendars[info.event.extendedProps.calId].events[
+              info.event.extendedProps.uid
+            ]
+          )
+        );
+      }
+
       setEventDisplayedId(info.event.extendedProps.uid);
       setEventDisplayedCalId(info.event.extendedProps.calId);
       setEventDisplayedTemp(info.event._def.extendedProps.temp);

src/components/Calendar/hooks/useCalendarEventHandlers.ts

@@ -30,6 +30,7 @@ export const useCalendarEventHandlers = (props: EventHandlersProps) => {
       props.setEventDisplayedId,
       props.setEventDisplayedCalId,
       props.setEventDisplayedTemp,
+      props.calendars,
     ]),
     handleEventAllow: useCallback(eventHandlers.handleEventAllow, []),
     handleEventDrop: useCallback(eventHandlers.handleEventDrop, [