getReactiveState

Returns reactive Svelte stores for each state field. Subscribe to a store to re-render when its value changes - useful inside custom toolbar items and other child components.

Usage

getReactiveState(): TState<State>;

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
visibleDateRange	{ start: Date; end: Date }	Start/end of the visible range
events	EventsStore	Internal event storage
viewData	any	View-model render data for the active view
filters	Map<string, (obj: any) => boolean>	Active filter predicates keyed by tag
editorData	CalendarEvent | null	Currently selected event, or null

Example

<script lang="ts">
  import { Calendar } from "@svar-ui/svelte-calendar";

  let api;

  function onInit(obj) {
    api = obj;
    const { rangeLabel } = api.getReactiveState();
    rangeLabel.subscribe(label => console.log("range:", label));
  }
</script>

<Calendar {events} {date} init={onInit} />

Related articles

• getState — non-reactive snapshot of the same fields.
• getStores — direct access to the underlying store instance.
• exec — dispatch actions that mutate state.
• Navigation bar — typical consumer of reactive state inside custom toolbar items.