DayPilot.Menu.items

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

Example of an event menu:

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

Menu Item Structure

The menu item object has 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. The menu source object (event or time range) is stored in args.source, the menu item can be accessed using args.item.

• 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 "*_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 (useful when modifying the menu items dynamically)

• icon (string): CSS class(es) that specify a font icon (e.g. "fas fa-user" for Font Awesome)

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

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

• items (array): array of submenu items

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

Menu item examples

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" }