rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix calendar not resizing when sidebar collapses

Browse Source 
Use ResizeObserver on the calendar container to call
FullCalendar.updateSize() when the sidebar transition
changes the available width.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-02-22 01:39:23 +08:00
parent c62f8bc2a2
commit f66ffba0ef
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/calendar/CalendarPage.tsx
View File

@ -1,4 +1,4 @@
import { useState, useRef, useMemo } from 'react'; import { useState, useRef, useEffect, useMemo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner'; import { toast } from 'sonner';
import FullCalendar from '@fullcalendar/react'; import FullCalendar from '@fullcalendar/react';
@ -51,6 +51,18 @@ export default function CalendarPage() {
const { settings } = useSettings(); const { settings } = useSettings();
const { data: calendars = [] } = useCalendars(); const { data: calendars = [] } = useCalendars();
const calendarContainerRef = useRef<HTMLDivElement>(null);
// Resize FullCalendar when container size changes (e.g. sidebar collapse)
useEffect(() => {
const el = calendarContainerRef.current;
if (!el) return;
const observer = new ResizeObserver(() => {
calendarRef.current?.getApi().updateSize();
});
observer.observe(el);
return () => observer.disconnect();
}, []);
const { data: events = [] } = useQuery({ const { data: events = [] } = useQuery({
queryKey: ['calendar-events'], queryKey: ['calendar-events'],
@ -270,7 +282,7 @@ export default function CalendarPage() {
<div className="flex h-full overflow-hidden"> <div className="flex h-full overflow-hidden">
<CalendarSidebar /> <CalendarSidebar />
<div className="flex-1 flex flex-col overflow-hidden"> <div ref={calendarContainerRef} className="flex-1 flex flex-col overflow-hidden">
{/* Custom toolbar — h-16 matches sidebar header */} {/* Custom toolbar — h-16 matches sidebar header */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0"> <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">