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

<script lang="ts">
    import { Calendar } from "@wx/svelte-calendar";
    import type { CalendarInstanceApi } from "@wx/svelte-calendar";

    let api = $state<CalendarInstanceApi>();

    function logState() {
        const state = api.getState();
        console.log(state.currentView, state.rangeLabel);
    }
</script>

<Calendar {events} bind:this={api} />
<button onclick={logState}>Log state</button>

Related articles

• getReactiveState — same fields as Svelte stores.
• getStores — direct store access for advanced integrations.
• getEvents — list events filtered by date range.
• exec — dispatch actions that change this state.