diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx index f4c88e7..2db7d3c 100644 --- a/components/calendar/calendar-client.tsx +++ b/components/calendar/calendar-client.tsx @@ -825,6 +825,10 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend const [selectedDate, setSelectedDate] = useState(null); const clickTimerRef = useRef(null); const lastClickDateRef = useRef(null); + + // Refs et state pour la hauteur du calendrier + const calendarContainerRef = useRef(null); + const [calendarHeight, setCalendarHeight] = useState(600); // hauteur par défaut // Update useEffect to initialize visible calendars and fetch events useEffect(() => { @@ -844,6 +848,45 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend }; }, []); + // Calculer la hauteur disponible pour FullCalendar + useEffect(() => { + const calculateHeight = () => { + if (calendarContainerRef.current) { + const containerHeight = calendarContainerRef.current.clientHeight; + // Utiliser la hauteur complète du conteneur si disponible, sinon utiliser une valeur par défaut + if (containerHeight > 0) { + setCalendarHeight(containerHeight); + } + } + }; + + // Calculer immédiatement + calculateHeight(); + + // Recalculer après un court délai (au cas où le DOM n'est pas complètement rendu) + const timeoutId1 = setTimeout(calculateHeight, 100); + const timeoutId2 = setTimeout(calculateHeight, 500); + + // Recalculer lors du redimensionnement de la fenêtre + window.addEventListener('resize', calculateHeight); + + // Observer les changements de taille du conteneur + const resizeObserver = new ResizeObserver(() => { + calculateHeight(); + }); + + if (calendarContainerRef.current) { + resizeObserver.observe(calendarContainerRef.current); + } + + return () => { + window.removeEventListener('resize', calculateHeight); + clearTimeout(timeoutId1); + clearTimeout(timeoutId2); + resizeObserver.disconnect(); + }; + }, [selectedDate, view]); // Recalculer quand la colonne de droite apparaît/disparaît ou la vue change + const updateStatistics = () => { const now = new Date(); const stats = { @@ -1688,7 +1731,10 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend -
+