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/svelte-calendar";

<ContextMenu {api} {options} {resolver} {filter} {at} {onclick} {css}>
  <Calendar bind:this={api} ... />
</ContextMenu>

Props

Prop	Type	Default	Description
api	CalendarInstanceApi | null	null	Calendar instance from bind:this. 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	Snippet	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

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

  let api = $state();

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

  function onclick({ action, context }) {
    if (action.id === "duplicate") {
      console.log("duplicate", context.id);
    }
  }
</script>

<ContextMenu {api} {options} {onclick}>
  <Calendar bind:this={api} events={[]} />
</ContextMenu>
{#if api}
  <Editor {api} />
{/if}

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.