javascript scheduler rectangle selection free hand

You can use the rectangle selection in the JavaScript Scheduler for the following actions:

  • select multiple events at once over multiple rows using drag and drop (this is the default action)

  • select multiple events in a row using drag and drop

  • create a time range selection over multiple rows

How to Trigger the Rectangle Selection

The rectangle selection is disabled by default. You can enable it using the rectangleSelectHandling property.

Scheduler config:

{
  rectangleSelectHandling: "EventSelect",
  // ...
}

Once you enable the rectangle selection, it can be activated using Shift+drag.

Using the onGridMouseDown event handler, you can change the mapping and use a simple drag, a custom modifier key, or the right mouse button.

Rectangle Selection Mode

javascript scheduler rectangle selection row mode

By default, the rectangle allows a free-hand selection over multiple rows.

You can also limit it to a single row using the rectangleSelectMode property:

{ 
  rectangleSelectMode: "Row",
  // ...
}

The Default Action

If you set the value of the rectangleSelectHandling property to "EventSelect", the Scheduler will automatically select all events that overlap with the selection rectangle.

Another options is to set the value to "Enabled". In that case, the Scheduler will not perform any action and you can provide your own implementation using the onRectangleSelecting, onRectangleSelect and onRectangleSelected events.

Overriding the Behavior

You can disable the default behavior and implement a custom action using the onRectangleSelecting event handler. This event is fired in real time and you can use it to provide live information about the underlying events or cells.

As soon as the user releases the mouse button, the Scheduler fires onRectangleSelect and onRectangleSelected events. There, you have access to the rectangle selection details (overlapping events, resources, time range) and you can perform custom operations.

Demo

Selecting a Time Range over Multiple Rows

javascript scheduler time range rows adjacent

The following tutorial shows how to implement time range selection that spans multiple rows: