Skip to main content

getMenuOptions

Returns a fresh array of the default context-menu entries - Edit event and Delete event. Used to seed the options prop of ContextMenu when extending the menu with custom items, instead of retyping the defaults.

Usage​

function getMenuOptions(): { id: string; text: string; icon: string }[];

Returns a new array on every call. Mutating the result does not affect the built-in defaults.

Default items​

[
	{ id: "edit-event", text: "Edit event", icon: "wxi-edit" },
	{ id: "delete-event", text: "Delete event", icon: "wxi-delete" },
];

The edit-event and delete-event ids are handled internally by ContextMenu through api.exec. Items with any other id are forwarded to the onClick handler.

Example​

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

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

function onClick({ action, context }) {
  if (action.id === "my-action") {
    console.log("custom action on", context);
  }
}

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

  return (
    <ContextMenu api={api.current} options={options} onClick={onClick}>
      <Calendar ref={api} events={events} date={date} />
    </ContextMenu>
  );
}