diff --git a/src/components/campaign/activity/ActivityAgenda.tsx b/src/components/campaign/activity/ActivityAgenda.tsx index f11a38a7..f5794b0e 100644 --- a/src/components/campaign/activity/ActivityAgenda.tsx +++ b/src/components/campaign/activity/ActivityAgenda.tsx @@ -1,6 +1,7 @@ 'use client' import FullCalendar, { + type CalendarRef, type DateClickInfo, type DatesSetInfo, type EventDisplayInfo, @@ -54,6 +55,8 @@ const eventColors: Record ({ id: String(event.id), title: event.title, @@ -97,6 +100,9 @@ const renderEventContent = ({ event, timeText }: EventDisplayInfo) => { export const ActivityAgenda = ({ state }: { state: ActivityAgendaState }) => { const router = useRouter() + const containerRef = useRef(null) + const calendarRef = useRef(null) + const narrowRef = useRef(null) const mountedRef = useRef(false) const pendingEventIDs = useRef(new Set()) const [visibleRange, setVisibleRange] = useState<{ start: string; end: string } | null>(null) @@ -113,6 +119,32 @@ export const ActivityAgenda = ({ state }: { state: ActivityAgendaState }) => { } }, []) + useEffect(() => { + const container = containerRef.current + if (!container) return + + const applyResponsiveView = () => { + const api = calendarRef.current?.getApi() + if (!api) return + const isNarrow = container.getBoundingClientRect().width < MOBILE_BREAKPOINT_PX + const previous = narrowRef.current + narrowRef.current = isNarrow + if (previous !== null && isNarrow === previous) return + const viewType = api.view.type + if (isNarrow && viewType === 'timeGridWeek') { + api.changeView('timeGridDay') + } else if (!isNarrow && viewType === 'timeGridDay') { + api.changeView('timeGridWeek') + } + } + + applyResponsiveView() + if (typeof ResizeObserver === 'undefined') return + const observer = new ResizeObserver(applyResponsiveView) + observer.observe(container) + return () => observer.disconnect() + }, []) + useEffect(() => { if (!visibleRange) return @@ -271,8 +303,9 @@ export const ActivityAgenda = ({ state }: { state: ActivityAgendaState }) => { ) : null} -
0}> +
0} ref={containerRef}> { headerToolbar={{ start: 'prev,next today', center: 'title', - end: 'timeGridWeek,dayGridMonth,listMonth', + end: 'timeGridWeek,timeGridDay,dayGridMonth,listMonth', }} height="auto" slotMinTime="07:00:00"