correction finition widget done

This commit is contained in:
alma 2026-01-19 23:53:33 +01:00
parent 04d91d288e
commit 614f8e5df3

View File

@ -828,6 +828,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
// Refs et state pour la hauteur du calendrier
const calendarContainerRef = useRef<HTMLDivElement>(null);
const cardRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLDivElement>(null);
const [calendarHeight, setCalendarHeight] = useState<number>(600); // hauteur par défaut
// Update useEffect to initialize visible calendars and fetch events
@ -851,9 +853,19 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
// Calculer la hauteur disponible pour FullCalendar
useEffect(() => {
const calculateHeight = () => {
if (calendarContainerRef.current) {
// Calculer depuis la Card parent qui a une hauteur définie
if (cardRef.current && headerRef.current) {
const cardHeight = cardRef.current.clientHeight;
const headerHeight = headerRef.current.offsetHeight;
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;
// Utiliser la hauteur complète du conteneur si disponible, sinon utiliser une valeur par défaut
if (containerHeight > 0) {
setCalendarHeight(containerHeight);
}
@ -870,13 +882,13 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
// Recalculer lors du redimensionnement de la fenêtre
window.addEventListener('resize', calculateHeight);
// Observer les changements de taille du conteneur
// Observer les changements de taille de la Card
const resizeObserver = new ResizeObserver(() => {
calculateHeight();
});
if (calendarContainerRef.current) {
resizeObserver.observe(calendarContainerRef.current);
if (cardRef.current) {
resizeObserver.observe(cardRef.current);
}
return () => {
@ -1621,8 +1633,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
{/* Middle column for calendar view */}
<div className="flex-1 flex flex-col">
<Card className="p-4 flex-1 flex flex-col">
<div className="flex items-center justify-between mb-4">
<Card ref={cardRef} className="p-4 flex-1 flex flex-col">
<div ref={headerRef} className="flex items-center justify-between mb-4">
<div className="flex items-center gap-4">
{/* Display selected calendar name */}
{(() => {