diff --git a/apps/client/src/widgets/collections/calendar/calendar.tsx b/apps/client/src/widgets/collections/calendar/calendar.tsx
index 061680ccf..18be5950a 100644
--- a/apps/client/src/widgets/collections/calendar/calendar.tsx
+++ b/apps/client/src/widgets/collections/calendar/calendar.tsx
@@ -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 { RefObject } from "preact";
 
@@ -10,7 +10,7 @@ interface CalendarProps extends CalendarOptions {
 export default function Calendar({ tabIndex, calendarRef, ...options }: CalendarProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (!containerRef.current) return;
 
         const calendar = new FullCalendar(containerRef.current, options);
diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx
index a135fa904..208bf17c6 100644
--- a/apps/client/src/widgets/collections/calendar/index.tsx
+++ b/apps/client/src/widgets/collections/calendar/index.tsx
@@ -147,7 +147,11 @@ function CalendarHeader({ calendarRef }: { calendarRef: RefObject<FullCalendar>
     const currentViewType = calendarRef.current?.view?.type;
     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">
             <span className="title">{calendarRef.current?.view.title}</span>
             <ButtonGroup>