mirror of
https://github.com/zadam/trilium.git
synced 2025-10-29 18:49:00 +01:00
fix(collections/calendar): header not initializing properly on first render
This commit is contained in:
parent
afc17f41f6
commit
e8024ce341
@ -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);
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user