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

<script setup>
  import {
    Calendar,
    ContextMenu,
    getMenuOptions,
  } from "@svar-ui/vue-calendar";

  const api = ref(null);

  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);
    }
  }
</script>

<template>
  <ContextMenu :api="api" :options="options" :onclick="onclick">
    <Calendar ref="api" :events="events" :date="date" />
  </ContextMenu>
</template>

Related articles

• ContextMenu — wrapper that consumes this options array.
• select-event — fired by the built-in edit-event id.
• delete-event — fired by the built-in delete-event id.
• Context menu — full guide for custom items and gates.