Skip to main content

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:

ActionPayload
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​

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

function App() {
  const api = useRef(null);

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

  function openMonthView() {
    api.current.exec("navigate-to", { view: "month" });
  }

  return (
    <>
      <Calendar ref={api} events={[]} date={new Date()} />
      <button onClick={jumpToToday}>Today</button>
      <button onClick={openMonthView}>Month</button>
    </>
  );
}