ContextMenu

Companion component that wraps <Calendar> (or any host content) and turns right-click on rendered events into a context menu. Resolves the clicked event through api.getEvent(...), runs built-in edit-event and delete-event ids, and forwards everything else through onClick.

Signature

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

<ContextMenu api={api} options={options} resolver={resolver} filter={filter} at={at} onClick={onClick} css={css}>
  <Calendar ref={apiRef} ... />
</ContextMenu>

Props

Prop	Type	Default	Description
api	CalendarInstanceApi | null	null	Calendar instance from ref. Required to resolve clicked event ids and run built-in actions.
options	any[]	[]	Menu items. When empty, the wrapper falls back to getMenuOptions() (default edit-event / delete-event).
resolver	((event: CalendarEvent, ev: MouseEvent) => any) | null	null	Gate called after event resolution. Return falsy to suppress the menu for that event.
filter	((item: any, event: CalendarEvent) => boolean) | null	null	Per-item filter. Return false to hide the item for the current event.
at	string	"point"	Placement mode forwarded to the inner menu (e.g. "point", "target").
onClick	(e: { action: any; context: CalendarEvent }) => void	undefined	Fires after built-in handling. Receives the menu action and the resolved event.
css	string	undefined	Extra CSS class forwarded to the underlying menu.
children	ReactNode	required	Wrapped content, typically <Calendar>.

Built-in item ids handled internally:

ID	Effect
edit-event	Dispatches api.exec("select-event", { id }).
delete-event	Dispatches api.exec("delete-event", { id }).

Custom ids are not dispatched as action - handle them in onClick.

Methods

Method	Signature	Description
show	show(ev: MouseEvent, obj?: any): void	Opens the menu programmatically at the pointer position for obj.

Example

import { useRef } from "react";
import {
  Calendar,
  ContextMenu,
  Editor,
  getMenuOptions,
} from "@svar-ui/react-calendar";

const options = [
  ...getMenuOptions(),
  { id: "duplicate", text: "Duplicate", icon: "wxi-empty" },
];

function onClick({ action, context }) {
  if (action.id === "duplicate") {
    console.log("duplicate", context.id);
  }
}

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

  return (
    <>
      <ContextMenu api={apiRef.current} options={options} onClick={onClick}>
        <Calendar ref={apiRef} events={[]} />
      </ContextMenu>
      {apiRef.current && <Editor api={apiRef.current} />}
    </>
  );
}

Related articles

• getMenuOptions — fresh copy of the default menu items.
• select-event — fired by the built-in edit-event id.
• delete-event — fired by the built-in delete-event id.
• Editor — typically mounted alongside so select-event opens a form.
• Context menu guide — full usage with custom items, resolvers, and filters.