EventDragSelect
Feature

Enables users to click and drag to select events (or assignments in multi assignment mode) inside the Scheduler's timeline. Press CTRL/CMD to extend an existing selection.

The selection rectangle element is styled using the CSS class name b-drag-select-rect. You may use application CSS to change its appearance from the default.

This feature is disabled by default. For info on enabling it, see GridFeatures.

Incompatible with the EventDragCreate and the Pan features.

const scheduler = new Scheduler({
  features : {
    eventDragSelect : true,
    eventDragCreate : false
  }
});

Useful configs and functions

Member	Description
beforeEventDragSelect	Fires before drag selection starts
eventDragSelect	Fires during drag selection
afterEventDragSelect	Fires when drag selection ends

Configs

Configs are options you supply in a configuration object when creating an instance of this class

includeNested : Booleanfalse
Configure as true to include nested events in the selection. Only applies to SchedulerPro, when using nested events. When false only parent events and events without nesting will be selected.

Marque selection cannot be started inside a parent event, and marque selecting a nested event will always also select the parent event.
```
const scheduler = new SchedulerPro({
    features : {
        nestedEvents : true, // Enable nested events
        eventDragSelect : {
            includeNested : true // Include nested events in the selection
        }
    }
});
```
Has a corresponding runtime includeNested property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isEventDragSelect : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of EventDragSelect class, or subclass thereof.

includeNested : Booleanfalse
Configure as true to include nested events in the selection. Only applies to SchedulerPro, when using nested events. When false only parent events and events without nesting will be selected.

Marque selection cannot be started inside a parent event, and marque selecting a nested event will always also select the parent event.
```
const scheduler = new SchedulerPro({
    features : {
        nestedEvents : true, // Enable nested events
        eventDragSelect : {
            includeNested : true // Include nested events in the selection
        }
    }
});
```
Has a corresponding includeNested config.
isEventDragSelect : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of EventDragSelect class, or subclass thereof.

Functions

Functions are methods available for calling on the class

onDragScroll( )

private

Called when the scheduler scrolls during an active drag selection. Throttled to one update per animation frame for performance.
updateRectangle( clientX, clientY )

private

Updates the selection rectangle position and size based on current cursor position.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

afterEventDragSelect

ON-OWNER

Fires on the owning Scheduler after the selection is finished.

Note that this event is triggered on the owning widget:
beforeEventDragSelect

PREVENTABLE

ON-OWNER

Fires on the owning Scheduler before drag selection starts. Return false to prevent the operation.

Note that this event is triggered on the owning widget:
eventDragSelect

ON-OWNER

Fires on the owning Scheduler when the selection area is updated.

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onAfterEventDragSelect

ON-OWNER

Called on the owning Scheduler after the selection is finished.

Note that this handler is called on the owning widget:
onBeforeEventDragSelect

PREVENTABLE

ON-OWNER

Called on the owning Scheduler before drag selection starts. Return false to prevent the operation.

Note that this handler is called on the owning widget:
onEventDragSelect

ON-OWNER

Called on the owning Scheduler when the selection area is updated.

Note that this handler is called on the owning widget:

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-event-drag-select-border-color	Marquee selection border color
--b-event-drag-select-border-radius	Marquee selection border-radius
--b-event-drag-select-border-style	Marquee selection border style
--b-event-drag-select-border-width	Marquee selection border width

id: eventDragSelect

Source path

Scheduler/feature/EventDragSelect.js

Demo

examples/dragselection

EventDragSelect
Feature

Useful configs and functions

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins3

Contents

EventDragSelect Feature

Useful configs and functions

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins3

Contents

EventDragSelect
Feature