Prepare calendar popover
This commit is contained in:
parent
be5032fc4c
commit
71abecae4e
@ -11,6 +11,9 @@ import {
|
|||||||
FormControlLabel,
|
FormControlLabel,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
FormLabel,
|
FormLabel,
|
||||||
|
Popover,
|
||||||
|
Typography,
|
||||||
|
fabClasses,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
|
import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
|
||||||
@ -55,6 +58,17 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
Set<number>
|
Set<number>
|
||||||
>(new Set());
|
>(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 () => {
|
const load = async () => {
|
||||||
setReservations(
|
setReservations(
|
||||||
await AccommodationsReservationsApi.FullListOfFamily(family.family)
|
await AccommodationsReservationsApi.FullListOfFamily(family.family)
|
||||||
@ -113,6 +127,8 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onEventClick = (ev: EventClickArg) => {
|
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);
|
console.log(ev);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -271,6 +287,33 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user