DayPilot.Menu.items

The items property (array) specifies the context menu items.

Declaration

DayPilot.Menu.items

Notes

Each menu item object can use the following properties:

• text (string): The menu item text to be displayed. Use "-" to show a separator. Required.

• href (string): The URL to be opened on menu item click. The {0} string will be replaced with the event id.

• onClick (function): JavaScript function to be called on menu item click.

• command (string): The command to be invoked on the server side (EventMenuClick or TimeRangeMenuClick event). Only applies to ASP.NET WebForms, ASP.NET MVC and Java versions.

• action (string): Method of invoking the menu item command on the server side: "CallBack" or "PostBack" ("CallBack" is the default value). Only applies to ASP.NET WebForms, ASP.NET MVC and Java versions.

• disabled (boolean): If set to true the menu item will be marked as disabled with the *_item_disabled CSS class and no action will be fired on click (since version 8.0.1591).

• hidden (boolean): Set to true to hide the item, which is useful when modifying the menu items dynamically.

• icon (string): CSS class names that specify a font icon, for example "fas fa-user" for Font Awesome.

• image (string): URL of the menu item icon.

• symbol (string): URL of an SVG symbol that will be used as an icon (since version 2022.3.5416).

• items (array): Nested submenu items.

• cssClass (string): Custom CSS class that will be added to the menu item (since version 8.2.3146).

The onClick event handler receives an args argument with the following structure:

• args.source - the menu source object (event or time range)

• args.item - the menu item object

• args.preventDefault() - prevents the menu from hiding (available since 2024.4.6243)

Example

Event menu:

const menu = new DayPilot.Menu({
  items: [
    {
      text: "Details",
      onClick: (args) => {
        const e = args.source;
        DayPilot.Modal.alert("Event text: " + e.text());
      }
    },
    { text: "-" },
    {
      text: "Delete",
      onClick: (args) => {
        dp.events.remove(args.source);
      }
    }
  ]
});

JavaScript action:

{
  text: "Open",
  onClick: (args) => {
    const e = args.source;
    alert(`Opening event: ${e.id()}`);
  }
}

Separator:

{ text: "-" }

Server-side action invoked using CallBack (ASP.NET MVC, ASP.NET WebForms, Java):

{ text: "Delete (CallBack)", command: "Delete", action: "CallBack" }

Server-side action invoked using PostBack (ASP.NET WebForms only):

{ text: "Delete (PostBack)", command: "Delete", action: "PostBack" }

URL:

{ text: "Open Google", href: "http://www.google.com/?q={0}" }

Using a Font Awesome icon:

{ text: "User details...", icon: "fas fa-user" }

See Also

DayPilot.Menu Class