exec

Dispatches an action through the calendar's event bus. The action flows through interceptors first, then registered handlers, then the router that forwards it to the matching on* prop.

Usage

exec<A extends keyof StoreActions>(
  action: A,
  data: StoreActions[A]
): Promise<StoreActions[A]>;

Returns a promise resolving to the (possibly mutated) payload after all handlers have run.

Available actions:

Action	Payload
navigate-to	{ date?: Date; view?: string }
navigate-time	{ direction: "next" | "previous" | "now" }
add-event	{ event: Partial<CalendarEvent>; edit?: boolean }
update-event	{ id, event, mode?, originalDate? }
delete-event	{ id: EventID }
select-event	{ id: EventID | null }
move-event	{ id, x, y }
filter-events	{ filter?, tag? }

The action event used by menuButton and custom toolbar items is not part of the typed StoreActions map and is dispatched by widget internals, not via exec.

Example

<script>
  import { Calendar } from "@svar-ui/svelte-calendar";
  let api = $state();

  function jumpToToday() {
    api.exec("navigate-time", { direction: "now" });
  }

  function openMonthView() {
    api.exec("navigate-to", { view: "month" });
  }
</script>

<Calendar bind:this={api} events={[]} date={new Date()} />
<button onclick={jumpToToday}>Today</button>
<button onclick={openMonthView}>Month</button>

Related articles

• on — observe actions after they run.
• intercept — block or confirm actions before they run.
• Actions overview — payload shapes for every dispatchable action.
• Methods overview — full instance API surface.