EventDragSelect

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.

Event drag select

//<code-header>
fiddle.title = 'Event drag select';
//</code-header>
const scheduler           = new Scheduler({
    appendTo : targetElement,

    // makes scheduler as tall as it needs to be to fit rows
    autoHeight : true,

    startDate : new Date(2022, 4, 6),
    endDate   : new Date(2022, 4, 13),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Drag in schedule to select', startDate : '2022-05-04', endDate : '2022-05-09' },
        { id : 2, resourceId : 1, name : 'Press meeting', startDate : '2022-05-11', endDate : '2022-05-14' },
        { id : 3, resourceId : 2, name : 'Audition', startDate : '2022-05-07', endDate : '2022-05-09' },
        { id : 4, resourceId : 2, name : 'Script deadline', startDate : '2022-05-11', endDate : '2022-05-11' }
    ],

    features : {
        eventDragSelect : true,
        eventDragCreate : false
    }
});

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
  }
});

Configs

Common

disabledInstancePlugin

listenersEvents

Other

includeNested: Boolean= falseAlso a property

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
        }
    }
});

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isEventDragSelect: Boolean= truereadonly

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

isEventDragSelect: Boolean= truereadonlystatic

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

isDelayableDelayable

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

includeNested: Boolean= falseAlso a config

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
        }
    }
});

catchEventHandlerExceptionsEvents

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

createOnFrameDelayable

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

afterEventDragSelect

Fires on the owning Scheduler after the selection is finished.

// Adding a listener using the "on" method
eventDragSelect.on('afterEventDragSelect', ({ source }) => {

});

Parameter	Type	Description
`source`	SchedulerBase	The Scheduler instance

beforeEventDragSelect

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

// Adding a listener using the "on" method
eventDragSelect.on('beforeEventDragSelect', ({ source, event }) => {

});

Parameter	Type	Description
`source`	SchedulerBase	The Scheduler instance
`event`	Event	The native browser DOM event

eventDragSelect

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

// Adding a listener using the "on" method
eventDragSelect.on('eventDragSelect', ({ source, startDate, endDate, rectangle, selectedAssignments, selectedEvents }) => {

});

Parameter	Type	Description
`source`	SchedulerBase	The Scheduler instance
`startDate`	Date	The start date of the selection area
`endDate`	Date	The end date of the selection area
`rectangle`	Rectangle	The rectangle of the selection area
`selectedAssignments`	AssignmentModel[]	The selected assignments
`selectedEvents`	EventModel[]	The selected events

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onAfterEventDragSelect

Called on the owning Scheduler after the selection is finished.

new EventDragSelect({
    onAfterEventDragSelect({ source }) {

    }
});

Parameter	Type	Description
`source`	SchedulerBase	The Scheduler instance

onBeforeEventDragSelect

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

new EventDragSelect({
    onBeforeEventDragSelect({ source, event }) {

    }
});

Parameter	Type	Description
`source`	SchedulerBase	The Scheduler instance
`event`	Event	The native browser DOM event

onEventDragSelect

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

new EventDragSelect({
    onEventDragSelect({ source, startDate, endDate, rectangle, selectedAssignments, selectedEvents }) {

    }
});

Parameter	Type	Description
`source`	SchedulerBase	The Scheduler instance
`startDate`	Date	The start date of the selection area
`endDate`	Date	The end date of the selection area
`rectangle`	Rectangle	The rectangle of the selection area
`selectedAssignments`	AssignmentModel[]	The selected assignments
`selectedEvents`	EventModel[]	The selected events

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

DelayableConfigDelayable

CSS variables

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

EventDragSelect

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Other

Lifecycle

Misc

Functions

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs

CSS variables