alma/NeahStable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correction finition widget done

Browse Source
This commit is contained in:
alma 2026-01-19 23:53:33 +01:00
parent 04d91d288e
commit 614f8e5df3
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/calendar/calendar-client.tsx
View File

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