Link Context Menu

You can enhance the functionality of links in the JavaScript Scheduler by adding a context menu with additional actions. A common use case is providing an option to delete a link.

To define a link menu, use the contextMenuLink property.

Example

Scheduler config:

{
  contextMenuLink: new DayPilot.Menu({
    items: [
      {
        text: "Delete",
        onClick: args => dp.links.remove(args.source)
      }
    ]
  }),
  // ...
}  

API: links.list, contextMenuLink.

Right-click the dependency to remove it from the displayed schedule. The menu handler uses the clicked link's calendar reference; persistence must be added by the application.

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

Angular

Assign a DayPilot.Menu to config.contextMenuLink. The menu item's handler receives the selected link in args.source.

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"}],
    links: [{id: "L1", from: 1, to: 2, type: "FinishToStart"}],
    contextMenuLink: new DayPilot.Menu({items: [{text: "Delete dependency", onClick: args => { args.source.calendar.links.remove(args.source); }}]})
  };

}

React

Supply the menu object through the contextMenuLink prop. The deletion handler is defined in the menu item rather than as a React click handler.

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"}]}
      links={[{id: "L1", from: 1, to: 2, type: "FinishToStart"}]}
      contextMenuLink={new DayPilot.Menu({items: [{text: "Delete dependency", onClick: args => { args.source.calendar.links.remove(args.source); }}]})}
    />
  </div>;
}

Vue

Bind the menu created in <script setup> using :contextMenuLink. Its item callback performs the link removal.

<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 links = [{id: "L1", from: 1, to: 2, type: "FinishToStart"}];
const contextMenuLink = new DayPilot.Menu({items: [{text: "Delete dependency", onClick: args => { args.source.calendar.links.remove(args.source); }}]});

</script>

<template>
  <div>

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