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;
          scheduler.update();
        }
      },
      {
        text: "Delete",
        onClick: args => {
          const row = args.source;
          scheduler.rows.remove(row);
          scheduler.message("Deleted");
        }
      }
    ]
  }),
  // ...
});
scheduler.init();

Tutorial:

JavaScript Scheduler: Resource Context Menu

API: contextMenuResource.

The examples add Rename room to the row context menu. Its handler calls args.source.edit() to start inline editing of the selected resource header.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    contextMenuResource: new DayPilot.Menu({items: [{text: "Rename room", onClick: args => { args.source.edit(); }}]})
  };

}

Angular Scheduler: Resource Management

Angular Scheduler: Dynamic Context Menu

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      contextMenuResource={new DayPilot.Menu({items: [{text: "Rename room", onClick: args => { args.source.edit(); }}]})}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const contextMenuResource = new DayPilot.Menu({items: [{text: "Rename room", onClick: args => { args.source.edit(); }}]});

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :contextMenuResource="contextMenuResource"
    />
  </div>
</template>

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.

Availability

Availability of this feature in DayPilot editions:

Product	Lite	Pro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java