correction finition widget done

This commit is contained in:
alma 2026-01-19 23:39:13 +01:00
parent 06a51a7158
commit 04d91d288e

View File

@ -825,6 +825,10 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
const clickTimerRef = useRef<NodeJS.Timeout | null>(null);
const lastClickDateRef = useRef<Date | null>(null);
// Refs et state pour la hauteur du calendrier
const calendarContainerRef = useRef<HTMLDivElement>(null);
const [calendarHeight, setCalendarHeight] = useState<number>(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
</Tabs>
</div>
<div className="flex-1 overflow-auto">
<div
ref={calendarContainerRef}
className="flex-1 min-h-0"
>
<style jsx global>{`
/* Fixed height and scrolling for day cells only */
.fc .fc-daygrid-day-frame {
@ -1702,6 +1748,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
margin-bottom: 0 !important;
}
/* Assurer que le calendrier utilise toute la hauteur */
.fc {
height: 100% !important;
}
/* Custom scrollbar styles */
.fc .fc-daygrid-day-frame::-webkit-scrollbar {
width: 4px;
@ -1846,7 +1897,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
dayMaxEvents={false}
weekends={true}
eventClick={handleEventClick}
height="100%"
contentHeight={calendarHeight}
slotMinTime="06:00:00"
slotMaxTime="22:00:00"
allDaySlot={true}