geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx

@@ -11,6 +11,9 @@ import {
   FormControlLabel,
   FormGroup,
   FormLabel,
+  Popover,
+  Typography,
+  fabClasses,
 } from "@mui/material";
 import React from "react";
 import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
@@ -55,6 +58,17 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
     Set<number>
   >(new Set());
 
+  const eventPopupAnchor = React.useRef<HTMLDivElement>(null);
+  const [activeEvent, setActiveEvent] = React.useState<
+    | undefined
+    | {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+      }
+  >();
+
   const load = async () => {
     setReservations(
       await AccommodationsReservationsApi.FullListOfFamily(family.family)
@@ -113,6 +127,8 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
   };
 
   const onEventClick = (ev: EventClickArg) => {
+    const loc = ev.el.getBoundingClientRect();
+    setActiveEvent({ x: loc.left, y: loc.top, w: loc.width, h: loc.height });
     console.log(ev);
   };
 
@@ -271,6 +287,33 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                 })}
               />
             </div>
+
+            {/* Calendar event popover */}
+            <div
+              ref={eventPopupAnchor}
+              id="active-event-anchor"
+              style={{
+                position: "fixed",
+                top: activeEvent?.y + "px",
+                left: activeEvent?.x + "px",
+                width: activeEvent?.w + "px",
+                height: activeEvent?.h + "px",
+                backgroundColor: "pink",
+              }}
+            ></div>
+            <Popover
+              open={activeEvent !== undefined}
+              anchorEl={eventPopupAnchor.current}
+              onClose={() => {
+                setActiveEvent(undefined);
+              }}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+            >
+              <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
+            </Popover>
           </div>
         )}
       />