DayPilot.Scheduler.onRectangleSelect

The onRectangleSelect event handler fires when the rectangle selection is complete in the JavaScript Scheduler (on mouse button release), before the default action.

Declaration

DayPilot.Scheduler.onRectangleSelect(args)

Parameters

• args.events - array of events that overlap the rectangle

• args.append (boolean) - whether to append args.events to the existing event selection; only applies when rectangleSelectHandling is set to "EventSelect"

• args.start (DayPilot.Date) - rectangle selection start time

• args.end (DayPilot.Date) - rectangle selection end time

• args.resources - array of resource IDs that overlap the rectangle selection

• args.preventDefault() - call this method to prevent the default action configured using rectangleSelectHandling

Notes

Use this event to inspect the completed rectangle selection before the configured default action is applied. The args.append flag is only relevant when rectangleSelectHandling uses "EventSelect".

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  onRectangleSelect: (args) => {
    dp.message(args.events.length + " events in selection");
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  onRectangleSelect: (args) => {
    console.log(args.events.length, args.resources);
  },
  // ...
};

React

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

const onRectangleSelect = (args) => {
  console.log(args.events.length, args.resources);
};

Vue

<DayPilotScheduler
  @rectangleSelect="onRectangleSelect"
  <!-- ... -->
/>

const onRectangleSelect = (args) => {
  console.log(args.events.length, args.resources);
};

See Also

Rectangle Selection [doc.daypilot.org]

DayPilot.Scheduler.rectangleSelectHandling

DayPilot.Scheduler.onRectangleSelecting

DayPilot.Scheduler.onRectangleSelected

DayPilot.Scheduler Class