DayPilot.Scheduler.onGridMouseDown

The onGridMouseDown event handler fires when the user presses a mouse button over the JavaScript Scheduler grid. You can use it to customize which action starts from that interaction.

Declaration

DayPilot.Scheduler.onGridMouseDown(args)

Parameters

• args.action ("None" | "RectangleSelect" | "TimeRangeSelect") - action to be started

• args.button ("left" | "right") - active mouse button (since version 2018.4.3438)

• args.ctrl (boolean) - Ctrl key state

• args.end (DayPilot.Date) - end of the cell under the mouse position (available since 2025.4.6746)

• args.meta (boolean) - Meta key state

• args.originalEvent (Event) - original mousedown event object

• args.preventDefault() - cancels the action and sets args.action to "None"

• args.row (DayPilot.Row) - resource line under the mouse position (available since 2025.4.6746)

• args.shift (boolean) - Shift key state

• args.start (DayPilot.Date) - start of the cell under the mouse position (available since 2025.4.6746)

Notes

This is the default behavior:

• Standard mouse down: the mousedown event starts time range selecting if it is enabled.

• Shift + mouse down: if DayPilot.Scheduler.rectangleSelectHandling is set to a value other than "Disabled" and the user holds Shift, rectangle selecting is activated.

Use args.preventDefault() when you want to cancel the action completely, or assign a different value to args.action to override the default behavior.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  onGridMouseDown: (args) => {
    if (args.button === "right") {
      args.action = "RectangleSelect";
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  onGridMouseDown: (args) => {
    if (args.button === "right") {
      args.action = "RectangleSelect";
    }
  },
  // ...
};

React

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

const onGridMouseDown = (args) => {
  if (args.button === "right") {
    args.action = "RectangleSelect";
  }
};

Vue

<DayPilotScheduler
  @gridMouseDown="onGridMouseDown"
  <!-- ... -->
/>

const onGridMouseDown = (args) => {
  if (args.button === "right") {
    args.action = "RectangleSelect";
  }
};

See Also

Rectangle Selection [doc.daypilot.org]

DayPilot.Scheduler.rectangleSelectHandling

JavaScript Scheduler Event Multi-Selecting Demo

DayPilot.Scheduler Class