getState

Returns a non-reactive snapshot of the calendar store state - the active date, view, visible range, events, filters, and currently selected event. Use it for one-off reads. For reactive subscriptions, use getReactiveState.

Usage

getState(): State;

type State = {
    currentDate: Date;
    currentView: string;
    rangeLabel: string;
    visibleDateRange: { start: Date; end: Date };
    events: EventsStore;
    viewData: any;
    filters: Map<string, (obj: any) => boolean>;
    editorData: CalendarEvent | null;
};

State fields:

Field	Type	Description
currentDate	Date	Pivot date that determines the visible range.
currentView	string	Active view id.
rangeLabel	string	Display label for the current date range (e.g. "May 2026").
visibleDateRange	{ start: Date; end: Date }	Start and end of the visible range.
events	EventsStore	Internal event storage with CRUD methods.
viewData	any	View-model-specific render data for the active view.
filters	Map<string, (obj) => boolean>	Active filter predicates keyed by tag.
editorData	CalendarEvent | null	Currently selected event, or null.

Example

import { useRef } from "react";
import { Calendar } from "@wx/react-calendar";

const apiRef = useRef(null);

const logState = () => {
    const state = apiRef.current.getState();
    console.log(state.currentView, state.rangeLabel);
};

<Calendar events={events} ref={apiRef} />
<button onClick={logState}>Log state</button>

Related articles

• getReactiveState — same fields, returns reactive state values.
• getStores — direct store access for advanced integrations.
• getEvents — list events filtered by date range.
• exec — dispatch actions that change this state.