html5 scheduler row header context menu

You can assign a custom context menu to row headers. The context menu will appear if you right-click anywhere in the Scheduler row header.

You can also add a custom context menu icon using a row header active area.

JavaScript

You can define the context menu using the contextMenuResource property:

const scheduler = new DayPilot.Scheduler("dp", {
  contextMenuResource: new DayPilot.Menu({
    items: [
      {
        text: "Edit...",
        onClick: async args => {
          const row = args.source;
          const modal = await DayPilot.Modal.prompt("Resource name:", row.name);
          if (modal.canceled) {
            return;
          }
          row.data.name = modal.result;
          dp.update();
        }
      },
      {
        text: "Delete",
        onClick: args => {
          const row = args.source;
          dp.rows.remove(row);
          dp.message("Deleted");
        }
      }
    ]
  }),
  // ...
});
scheduler.init();

Tutorial:

Angular

Tutorial:

ASP.NET WebForms

Use ContextMenuResourceID property to assign the context menu.

<DayPilot:DayPilotMenu ID="DayPilotMenuRes" runat="server"  CssClassPrefix="menu_default">
  <DayPilot:MenuItem Action="CallBack" Command="Insert" Text="Add child" />
  <DayPilot:MenuItem Text="-" Action="JavaScript"></DayPilot:MenuItem>
  <DayPilot:MenuItem Action="CallBack" Command="Delete" Text="Delete" />
  <DayPilot:MenuItem Action="CallBack" Command="DeleteChildren" Text="Delete children" />
  <DayPilot:MenuItem Text="-" Action="JavaScript"></DayPilot:MenuItem>
  <DayPilot:MenuItem Action="JavaScript" JavaScript="alert(e.name + '\n' + e.value);"
      Text="Show resource details" />
</DayPilot:DayPilotMenu>

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

ASP.NET MVC

 
@Html.DayPilotMenu("menu_resource", 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 + ' ' + e.name);"}
    }
  })

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

Make sure the menu is declared first.