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) => {; },

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

  onClick: (args) => { 
    const e = args.source;
    alert(`Opening event: ${}`); 


{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' }


{text: 'Open Google', href: '{0}' }

Using a Font Awesome icon

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