DayPilot.Scheduler.onRectangleSelecting

The onRectangleSelecting event handler is a real-time event that fires while the rectangle selection is in progress in the JavaScript Scheduler.

Declaration

DayPilot.Scheduler.onRectangleSelecting(args)

Parameters

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

• 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.visible (boolean) - lets you hide the rectangle highlight

Notes

Use this event to update the UI while the user changes the selected rectangle. Set args.visible = false when you want to hide the built-in rectangle highlight and provide custom feedback instead.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  onRectangleSelecting: (args) => {
    if (args.events.length === 0) {
      args.visible = false;
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  onRectangleSelecting: (args) => {
    if (args.events.length === 0) {
      args.visible = false;
    }
  },
  // ...
};

React

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

const onRectangleSelecting = (args) => {
  if (args.events.length === 0) {
    args.visible = false;
  }
};

Vue

<DayPilotScheduler
  @rectangleSelecting="onRectangleSelecting"
  <!-- ... -->
/>

const onRectangleSelecting = (args) => {
  if (args.events.length === 0) {
    args.visible = false;
  }
};

See Also

Rectangle Selection [doc.daypilot.org]

DayPilot.Scheduler.onRectangleSelect

DayPilot.Scheduler.onRectangleSelected

DayPilot.Scheduler Class