Event Context Menu

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

See also context menu.

JavaScript

See also DayPilot.Scheduler.contextMenu.

Example: Basic 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:

Special menu:

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(DayPilot.Util.escapeHtml(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

• JavaScript Scheduler: Context Menu for External Items

• JavaScript Scheduler: Lock Events using Context Menu

• JavaScript Scheduler: Swap Events using Context Menu

API: contextMenu.

The menu below displays details or deletes the selected event locally. Its callbacks receive the event as args.source and reach its Scheduler through args.source.calendar.

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

Angular

Create the DayPilot.Menu in config.contextMenu. Item actions are defined in the menu's onClick functions.

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"}],
    contextMenu: new DayPilot.Menu({items: [{text: "Details", onClick: args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.source.text())); }}, {text: "Delete", onClick: args => { args.source.calendar.events.remove(args.source); }}]})
  };

}

Tutorials

• Angular Scheduler: Dynamic Context Menu

React

Pass the menu object as the contextMenu prop; its item callbacks receive DayPilot menu arguments.

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"}]}
      contextMenu={new DayPilot.Menu({items: [{text: "Details", onClick: args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.source.text())); }}, {text: "Delete", onClick: args => { args.source.calendar.events.remove(args.source); }}]})}
    />
  </div>;
}

Vue

Bind the menu object using :contextMenu. The callbacks belong to its item definitions, so they do not use template @click bindings.

<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 contextMenu = new DayPilot.Menu({items: [{text: "Details", onClick: args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.source.text())); }}, {text: "Delete", onClick: args => { args.source.calendar.events.remove(args.source); }}]});

</script>

<template>
  <div>

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

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

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

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

@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());"}
  }
})

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