DayPilot.Calendar.contextMenuSelection

The contextMenuSelection property (DayPilot.Menu) sets the context menu shown for an active time range selection.

Declaration

DayPilot.Calendar.contextMenuSelection

Default Value

null

Notes

The menu is displayed when the user right-clicks a selected time range. Menu item handlers can read the selected start, end, and resource values from args.source.

Use DayPilot.Calendar.clearSelection() when you want to remove the selection after a command completes. The same DayPilot.Menu action model can also be used for other calendar context menus.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  contextMenuSelection: new DayPilot.Menu({
    items: [
      {
        text: "Create new event",
        onClick: args => {
          calendar.events.add(new DayPilot.Event({
            start: args.source.start,
            end: args.source.end,
            text: "New event",
            resource: args.source.resource
          }));
        }
      },
      {
        text: "Show selection details",
        onClick: args => {
          DayPilot.Modal.alert("Start: " + args.source.start + ", End: " + args.source.end + ", Resource: " + args.source.resource);
        }
      },
      {
        text: "Clear selection",
        onClick: () => calendar.clearSelection()
      }
    ]
  }),
  // ...
});
calendar.init();

Angular

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

selectionMenu = new DayPilot.Menu({
  items: [
    {
      text: "Show selection details",
      onClick: args => {
        DayPilot.Modal.alert("Selection: " + args.source.start + " - " + args.source.end);
      }
    }
  ]
});

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

React

<DayPilotCalendar
  contextMenuSelection={selectionMenu}
  {/* ... */}
/>

const selectionMenu = new DayPilot.Menu({
  items: [
    {
      text: "Show selection details",
      onClick: args => {
        DayPilot.Modal.alert("Selection: " + args.source.start + " - " + args.source.end);
      }
    }
  ]
});

Vue

<DayPilotCalendar
  :contextMenuSelection="selectionMenu"
  <!-- ... -->
/>

const selectionMenu = new DayPilot.Menu({
  items: [
    {
      text: "Show selection details",
      onClick: args => {
        DayPilot.Modal.alert("Selection: " + args.source.start + " - " + args.source.end);
      }
    }
  ]
});

See Also

DayPilot.Menu Class

Time Range Context Menu [doc.daypilot.org]

Context Menu [doc.daypilot.org]

DayPilot.Calendar.clearSelection()

DayPilot.Calendar Class