correction finition widget done
This commit is contained in:
parent
614f8e5df3
commit
894f9555b7
@ -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}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user