DayPilot.Scheduler.contextMenuSelection

The contextMenuSelection property (DayPilot.Menu) sets the context menu used for JavaScript Scheduler time range selection.

Declaration

DayPilot.Scheduler.contextMenuSelection

Default Value

null

Notes

Assign a DayPilot.Menu instance to define actions for the selected time range. In menu item handlers, args.source exposes the selected range, including its start, end, and resource.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  contextMenuSelection: new DayPilot.Menu({
    items: [
      {
        text: "Create new event",
        onClick: args => {
          const range = args.source;
          dp.events.add({
            start: range.start,
            end: range.end,
            resource: range.resource,
            id: DayPilot.guid(),
            text: "New event"
          });
        }
      },
      {
        text: "Show start",
        onClick: args => {
          const range = args.source;
          DayPilot.Modal.alert(`Start: ${range.start}`);
        }
      },
      {
        text: "-"
      },
      {
        text: "Clear selection",
        onClick: args => dp.clearSelection()
      }
    ]
  }),
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>

contextMenuSelection = new DayPilot.Menu({
  items: [
    {
      text: "Show start",
      onClick: args => DayPilot.Modal.alert(`Start: ${args.source.start}`)
    }
  ],
});

config: DayPilot.SchedulerConfig = {
  contextMenuSelection: this.contextMenuSelection,
  // ...
};

React

<DayPilotScheduler
  contextMenuSelection={contextMenuSelection}
  {/* ... */}
/>

const contextMenuSelection = new DayPilot.Menu({
  items: [
    {
      text: "Show start",
      onClick: args => DayPilot.Modal.alert(`Start: ${args.source.start}`)
    }
  ]
});

Vue

<DayPilotScheduler
  :contextMenuSelection="contextMenuSelection"
  <!-- ... -->
/>

const contextMenuSelection = new DayPilot.Menu({
  items: [
    {
      text: "Show start",
      onClick: args => DayPilot.Modal.alert(`Start: ${args.source.start}`)
    }
  ]
});

See Also

DayPilot.Scheduler.contextMenu

DayPilot.Scheduler.contextMenuResource

DayPilot.Scheduler Class