The context menu will be activated on event right click, provided that the menu is defined (ContextMenu property) and the EventRightClickHanding is set to "ContextMenu" (default).

See also context menu.

JavaScript

See also DayPilot.Scheduler.contextMenu.

Example: Basic Event Context Menu

javascript scheduler event context menu

{
  contextMenu: new DayPilot.Menu({
    items: [
      { text: "Edit", onClick: (args) => { dp.events.edit(args.source); } },
      { text: "Delete", onClick: (args) => { dp.events.remove(args.source); } },
      { text: "-"},
      { text: "Change background color", onClick: (args) => {
          const e = args.source;
          e.data.backColor = "red";
          dp.events.update(e);
        }
      },
      { text: "-"},
      { text: "Select", onClick: (args) => { dp.multiselect.add(args.source); } },
    ]
  }),
  // ...
}

Example: Event-Specific Context Menu

Default menu:

javascript scheduler event specific context menu default

Special menu:

javascript scheduler event specific context menu special

This example defines a default menu (menu1) and assigns a custom menu (menu2) to certain events using onBeforeEventRender:

var menu1 = new DayPilot.Menu({
  items: [
    { text: "Edit", onClick: function (args) { dp.events.edit(args.source); } },
    { text: "Delete", onClick: function (args) { dp.events.remove(args.source); } },
  ]
});

var menu2 = new DayPilot.Menu({
  items: [
    { text: "Details...", onClick: function (args) { DayPilot.Modal.alert(args.source.text()); } },
  ]
});

var dp = new DayPilot.Scheduler("dp");

// ...
dp.contextMenu = menu1; // default menu

dp.onBeforeEventRender = function(args) {
  if (args.data.menuType === "special") {
    args.data.contextMenu = menu2;
  }
};

dp.events.list = [
  {
    id: 1,
    text: "Event 1",
    start: "2019-09-01T00:00:00",
    end: "2019-09-10T00:00:00",
    resource: "A",
    menuType: "special"
  },
  {
    id: 2,
    text: "Event 2",
    start: "2019-09-04T00:00:00",
    end: "2019-09-08T00:00:00",
    resource: "B"
  },
];

dp.init();

Tutorials

Angular

Tutorials

ASP.NET WebForms

 
<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ContextMenuID="DayPilotMenu2" 
  ContextMenuResourceID="DayPilotMenuRes"
  ...
  >
</DayPilot:DayPilotScheduler>

Context menu control:

<DayPilot:DayPilotMenu ID="DayPilotMenu2" runat="server" CssClassPrefix="menu_default" UseShadow="false">
  <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="alert('Opening event (id ' + e.value() + ')');">
  </DayPilot:MenuItem>
  <DayPilot:MenuItem Text="Send" Action="JavaScript" JavaScript="alert('Sending event (id ' + e.value() + ')');">
  </DayPilot:MenuItem>
  <DayPilot:MenuItem Text="Refresh" Action="JavaScript" JavaScript="dps1.commandCallBack('refresh');">
  </DayPilot:MenuItem>
  <DayPilot:MenuItem Text="-" Action="NavigateUrl"></DayPilot:MenuItem>
  <DayPilot:MenuItem Text="Delete (CallBack)" Action="Callback" Command="Delete"></DayPilot:MenuItem>
  <DayPilot:MenuItem Action="PostBack" Command="Delete" Text="Delete (PostBack)" />
  <DayPilot:MenuItem Action="NavigateUrl" NavigateUrl="javascript:alert('Going somewhere else (id {0})');" Text="NavigateUrl test" />
</DayPilot:DayPilotMenu>

ASP.NET MVC

You can activate the context menu using right click or using an active area.

Context Menu Activated on Event Right Click

scheduler asp.net mvc event context menu right click

The default value of EventRightClickHandling is EventRightClickHandlingType.ContextMenu.

You need to set ContextMenu property to the menu id.

View

@Html.DayPilotMenu("menu", new DayPilotMenuConfig {
  CssClassPrefix = "menu_default",
  Items = new DayPilot.Web.Mvc.MenuItemCollection
  {
    new DayPilot.Web.Mvc.MenuItem { Text = "Open", Action = MenuItemAction.JavaScript, JavaScript = "alert(e.value());"}
  }
})

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  ContextMenu = "menu"
})

Note: The context menu must be declared before it is assigned (Html.DayPilotMenu must be above Html.DayPilotScheduler).

Demo

Context Menu Activated using Active Area

scheduler asp.net mvc event context menu active area

Add an active are in OnBeforeEventRender:

View

@Html.DayPilotMenu("menu", new DayPilotMenuConfig {
  CssClassPrefix = "menu_default",
  Items = new DayPilot.Web.Mvc.MenuItemCollection
  {
    new DayPilot.Web.Mvc.MenuItem { Text = "Open", Action = MenuItemAction.JavaScript, JavaScript = "alert(e.value());"}
  }
})

Backend Controller

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_menu").ContextMenu("menu"));
}

These sample classes (event_action_delete and event_action_menu) are defined in Themes/areas.css (plus Themes/areas directory) so don't forget to include it.

Demo