fix(collections/calendar): header not initializing properly on first render

This commit is contained in:
Elian Doran 2025-09-06 12:34:18 +03:00
parent afc17f41f6
commit e8024ce341
No known key found for this signature in database
2 changed files with 7 additions and 3 deletions

View File

@ -1,4 +1,4 @@
import { useEffect, useRef } from "preact/hooks"; import { useLayoutEffect, useRef } from "preact/hooks";
import { CalendarOptions, Calendar as FullCalendar, PluginDef } from "@fullcalendar/core"; import { CalendarOptions, Calendar as FullCalendar, PluginDef } from "@fullcalendar/core";
import { RefObject } from "preact"; import { RefObject } from "preact";
@ -10,7 +10,7 @@ interface CalendarProps extends CalendarOptions {
export default function Calendar({ tabIndex, calendarRef, ...options }: CalendarProps) { export default function Calendar({ tabIndex, calendarRef, ...options }: CalendarProps) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => { useLayoutEffect(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
const calendar = new FullCalendar(containerRef.current, options); const calendar = new FullCalendar(containerRef.current, options);

View File

@ -147,7 +147,11 @@ function CalendarHeader({ calendarRef }: { calendarRef: RefObject<FullCalendar>
const currentViewType = calendarRef.current?.view?.type; const currentViewType = calendarRef.current?.view?.type;
const currentViewData = CALENDAR_VIEWS.find(v => calendarRef.current && v.type === currentViewType); const currentViewData = CALENDAR_VIEWS.find(v => calendarRef.current && v.type === currentViewType);
return ( // Wait for the calendar ref to become available.
const [ ready, setReady ] = useState(false);
useEffect(() => setReady(true), []);
return (ready &&
<div className="calendar-header"> <div className="calendar-header">
<span className="title">{calendarRef.current?.view.title}</span> <span className="title">{calendarRef.current?.view.title}</span>
<ButtonGroup> <ButtonGroup>