This commit is contained in:
Louis Mazin 2026-09-25 16:05:56 +02:00
parent 848699ba61
commit 0cb8747e09

View File

@ -1,6 +1,5 @@
import React, {
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
@ -113,8 +112,6 @@ const CalendarPage = () => {
);
const [isMobile, setIsMobile] =
useState(false);
const [availableHeight, setAvailableHeight] =
useState(600);
const [events, setEvents] =
useState([]);
const [loadingEvents, setLoadingEvents] =
@ -162,7 +159,6 @@ const CalendarPage = () => {
end_time: '',
color: DEFAULT_EVENT_COLOR,
});
const calendarRef = useRef(null);
/* SÉLECTION D'UNE PÉRIODE */
const [selectionStart, setSelectionStart] = useState(null);
const [selectionEnd, setSelectionEnd] = useState(null);
@ -434,70 +430,6 @@ const CalendarPage = () => {
useEffect(() => {
if (isMobile) clearSelection();
}, [isMobile]);
/*
* ============================================================
* DIMENSIONS CALENDRIER
* ============================================================
*/
useLayoutEffect(() => {
if (loadingEvents) return;
const updateDimensions = () => {
const calendar =
calendarRef.current;
if (!calendar) return;
const cardContent =
calendar.closest(
'[data-slot="card-content"]',
);
if (!cardContent) return;
const calendarTop =
calendar.getBoundingClientRect()
.top;
const contentRect =
cardContent.getBoundingClientRect();
const footer =
document.querySelector('footer');
const footerTop = footer
? footer.getBoundingClientRect()
.top
: window.innerHeight;
const bottom = Math.min(
contentRect.bottom,
footerTop,
window.innerHeight,
);
const height =
bottom - calendarTop - 4;
setAvailableHeight(
Math.max(300, height),
);
};
updateDimensions();
window.addEventListener(
'resize',
updateDimensions,
);
let observer = null;
if (
typeof ResizeObserver !==
'undefined' &&
calendarRef.current
) {
observer = new ResizeObserver(
updateDimensions,
);
observer.observe(
calendarRef.current,
);
}
return () => {
window.removeEventListener(
'resize',
updateDimensions,
);
observer?.disconnect();
};
}, [year, selectedMonth, isMobile, loadingEvents]);
/*
* ============================================================
* ANNÉE
@ -955,16 +887,6 @@ const CalendarPage = () => {
? getDaysInMonth(selectedMonth)
: 31;
const availableGridHeight = Math.max(
availableHeight - HEADER_HEIGHT,
rowCount * MIN_ROW_HEIGHT,
);
const rowHeight = Math.max(
MIN_ROW_HEIGHT,
availableGridHeight / rowCount,
);
const minimumGridWidth = isMobile
? 0
: DAY_COLUMN_WIDTH +
@ -1464,7 +1386,6 @@ const CalendarPage = () => {
)}
<Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0">
<div
ref={calendarRef}
className="relative min-h-0 flex-1 overflow-auto md:overflow-hidden p-0"
style={{
WebkitOverflowScrolling:
@ -1474,21 +1395,16 @@ const CalendarPage = () => {
}}
>
<div
className="grid h-fit w-full min-w-0 border-l border-t border-border"
className="grid h-full w-full min-w-0 border-l border-t border-border"
style={{
minHeight: `${HEADER_HEIGHT + rowCount * MIN_ROW_HEIGHT}px`,
minWidth: isMobile
? '100%'
: `${minimumGridWidth}px`,
gridTemplateColumns,
gridTemplateRows: `
${HEADER_HEIGHT}px
repeat(
${rowCount},
${rowHeight}px
)
`,
gridTemplateRows: `${HEADER_HEIGHT}px repeat(${rowCount}, minmax(${MIN_ROW_HEIGHT}px, 1fr))`,
boxSizing:
'border-box',
}}
@ -1560,9 +1476,6 @@ const CalendarPage = () => {
text-xs font-medium
text-muted-foreground
"
style={{
height: `${rowHeight}px`,
}}
>
{day}
</div>
@ -1590,9 +1503,6 @@ const CalendarPage = () => {
border-b border-r border-border
bg-transparent
"
style={{
height: `${rowHeight}px`,
}}
/>
);
}
@ -1656,7 +1566,6 @@ const CalendarPage = () => {
`}
data-calendar-date={cellDate}
style={{
height: `${rowHeight}px`,
overflow:
'visible',
}}
@ -1812,8 +1721,8 @@ const CalendarPage = () => {
rounded-full
"
style={{
width: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
height: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
width: '12px',
height: '12px',
backgroundColor: eventColor,
}}
onPointerDown={(pointerEvent) => {