getState

Returns a non-reactive snapshot of the calendar composable 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 setup lang="ts">
    import { ref } from "vue";
    import { Calendar } from "@wx/vue-calendar";
    import type { CalendarInstanceApi } from "@wx/vue-calendar";

    const api = ref<CalendarInstanceApi | null>(null);

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

<template>
    <Calendar :events="events" ref="api" />
    <button :onclick="logState">Log state</button>
</template>

Related articles

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