correction finition widget done

This commit is contained in:
alma 2026-01-20 00:01:33 +01:00
parent 614f8e5df3
commit 894f9555b7

View File

@ -853,19 +853,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
// Calculer la hauteur disponible pour FullCalendar // Calculer la hauteur disponible pour FullCalendar
useEffect(() => { useEffect(() => {
const calculateHeight = () => { const calculateHeight = () => {
// Calculer depuis la Card parent qui a une hauteur définie if (calendarContainerRef.current) {
if (cardRef.current && headerRef.current) { // Utiliser getBoundingClientRect pour obtenir la hauteur réelle du conteneur
const cardHeight = cardRef.current.clientHeight; const rect = calendarContainerRef.current.getBoundingClientRect();
const headerHeight = headerRef.current.offsetHeight; const containerHeight = rect.height;
const padding = 16; // p-4 = 1rem = 16px (top + bottom)
const availableHeight = cardHeight - headerHeight - padding;
if (availableHeight > 0) {
setCalendarHeight(availableHeight);
}
} else if (calendarContainerRef.current) {
// Fallback: utiliser le conteneur si les refs ne sont pas disponibles
const containerHeight = calendarContainerRef.current.clientHeight;
if (containerHeight > 0) { if (containerHeight > 0) {
setCalendarHeight(containerHeight); setCalendarHeight(containerHeight);
} }
@ -878,23 +870,25 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
// Recalculer après un court délai (au cas où le DOM n'est pas complètement rendu) // Recalculer après un court délai (au cas où le DOM n'est pas complètement rendu)
const timeoutId1 = setTimeout(calculateHeight, 100); const timeoutId1 = setTimeout(calculateHeight, 100);
const timeoutId2 = setTimeout(calculateHeight, 500); const timeoutId2 = setTimeout(calculateHeight, 500);
const timeoutId3 = setTimeout(calculateHeight, 1000);
// Recalculer lors du redimensionnement de la fenêtre // Recalculer lors du redimensionnement de la fenêtre
window.addEventListener('resize', calculateHeight); window.addEventListener('resize', calculateHeight);
// Observer les changements de taille de la Card // Observer les changements de taille du conteneur
const resizeObserver = new ResizeObserver(() => { const resizeObserver = new ResizeObserver(() => {
calculateHeight(); calculateHeight();
}); });
if (cardRef.current) { if (calendarContainerRef.current) {
resizeObserver.observe(cardRef.current); resizeObserver.observe(calendarContainerRef.current);
} }
return () => { return () => {
window.removeEventListener('resize', calculateHeight); window.removeEventListener('resize', calculateHeight);
clearTimeout(timeoutId1); clearTimeout(timeoutId1);
clearTimeout(timeoutId2); clearTimeout(timeoutId2);
clearTimeout(timeoutId3);
resizeObserver.disconnect(); resizeObserver.disconnect();
}; };
}, [selectedDate, view]); // Recalculer quand la colonne de droite apparaît/disparaît ou la vue change }, [selectedDate, view]); // Recalculer quand la colonne de droite apparaît/disparaît ou la vue change
@ -1745,7 +1739,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
<div <div
ref={calendarContainerRef} ref={calendarContainerRef}
className="flex-1 min-h-0" className="flex-1 min-h-0 overflow-hidden"
style={{ height: '100%' }}
> >
<style jsx global>{` <style jsx global>{`
/* Fixed height and scrolling for day cells only */ /* Fixed height and scrolling for day cells only */
@ -1763,6 +1758,13 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
/* Assurer que le calendrier utilise toute la hauteur */ /* Assurer que le calendrier utilise toute la hauteur */
.fc { .fc {
height: 100% !important; height: 100% !important;
display: flex;
flex-direction: column;
}
.fc .fc-view-harness {
flex: 1 1 auto;
min-height: 0;
} }
/* Custom scrollbar styles */ /* Custom scrollbar styles */
@ -1909,7 +1911,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
dayMaxEvents={false} dayMaxEvents={false}
weekends={true} weekends={true}
eventClick={handleEventClick} eventClick={handleEventClick}
contentHeight={calendarHeight} height="100%"
slotMinTime="06:00:00" slotMinTime="06:00:00"
slotMaxTime="22:00:00" slotMaxTime="22:00:00"
allDaySlot={true} allDaySlot={true}