EventSegmentDrag

Allows user to drag and drop event segments within the row.

Event segments

//<code-header>
fiddle.title = 'Event segments';
//</code-header>
const schedulerPro = new SchedulerPro({
    appendTo : targetElement,

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

    startDate : new Date(2022, 2, 20),
    endDate   : new Date(2022, 2, 27),

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

    project : {
        resources : [
            { id : 1, name : 'Bruce' },
            { id : 2, name : 'Diana' }
        ],

        events : [
            {
                id        : 1,
                name      : 'Art project',
                startDate : '2022-03-21',
                segments  : [
                    { startDate : '2022-03-21', duration : 1 },
                    { startDate : '2022-03-23', duration : 1 },
                    { startDate : '2022-03-25', duration : 1 }
                ]
            },
            {
                id        : 2,
                name      : 'DIY project',
                startDate : '2022-03-21',
                segments  : [
                    // segments can have their own names & colors
                    { name : 'Plan', startDate : '2022-03-21', duration : 1, eventColor : 'indigo' },
                    { name : 'Get supplies', startDate : '2022-03-23', duration : 2  }
                ]
            }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 },
            { id : 7, event : 2, resource : 2 }
        ]
    },
    features : {
        eventSegments : {
            // split at the exact date user clicks in UI
            roundedSplit : false
        }
    }
});

This feature is enabled by default

Configs

Common

disabledInstancePlugin

listenersEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Other

allowNonWorkingTimeSNETDragBase

alwaysCopyEventDrag

catchEventHandlerExceptionsEvents

constrainDragToResourceEventDrag

constrainDragToTimelineDragBase

constrainDragToTimeSlotEventDrag

copyKeyEventDrag

copyModeEventDrag

dragHelperConfigDragBase

externalDropTargetSelectorEventDrag

showExactDropPositionDragBase

showTooltipDragBase

singleDirectionEventDrag

snapToPositionEventDrag

snapToResourceEventDrag

throttleDragEventDragBase

tipDragBase

tooltipTemplateEventDrag

unifiedDragEventDrag

validatorFnEventDrag

validatorFnThisObjEventDrag

Properties

Common

disabledInstancePlugin

Class hierarchy

isEventSegmentDrag: Boolean= truereadonly

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

isEventSegmentDrag: Boolean= truereadonlystatic

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

isDragBaseDragBase

isEventDragEventDrag

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

alwaysCopyEventDrag

catchEventHandlerExceptionsEvents

constrainDragToResourceEventDrag

constrainDragToTimeSlotEventDrag

copyKeyEventDrag

copyModeEventDrag

isDraggingDragBase

modeEventDrag

showTooltipDragBase

singleDirectionEventDrag

snapToResourceEventDrag

throttleDragEventDragBase

tipDragBase

unifiedDragEventDrag

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

getRelatedRecordsEventDrag

getTipHtmlDragBase

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

afterEventSegmentDrop

Fired on the owning Scheduler after an event segment is dropped

// Adding a listener using the "on" method
eventSegmentDrag.on('afterEventSegmentDrop', ({ source, eventRecords, valid, context }) => {

});

Parameter	Type	Description
`source`	Scheduler
`eventRecords`	EventModel[]	Dropped segments
`valid`	Boolean
`context`	Object

beforeEventSegmentDrag

Fired on the owning Scheduler before event segment dragging starts. Return false to prevent the action.

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

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecords`	EventModel[]	Segments to drag
`event`	MouseEvent	Browser event

beforeEventSegmentDropFinalize

Fired on the owning Scheduler to allow implementer to use asynchronous finalization by setting context.async = true in the listener, to show a confirmation popup etc.

 scheduler.on('beforeEventSegmentDropFinalize', ({ context }) => {
     context.async = true;
     setTimeout(() => {
         // async code don't forget to call finalize
         context.finalize();
     }, 1000);
 })

For synchronous one-time validation, simply set context.valid to true or false.

 scheduler.on('beforeEventSegmentDropFinalize', ({ context }) => {
     context.valid = false;
 })

// Adding a listener using the "on" method
eventSegmentDrag.on('beforeEventSegmentDropFinalize', ({ source, context, context.async, context.eventRecords, context.valid, context.finalize }) => {

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`context`	Object
`context.async`	Boolean	Set true to not finalize the drag-drop operation immediately (e.g. to wait for user confirmation)
`context.eventRecords`	EventModel[]	Dragged segments
`context.valid`	Boolean	Set this to `false` to abort the drop immediately.
`context.finalize`	function	Call this method after an async finalization flow, to finalize the drag-drop operation. This method accepts one argument: pass `true` to update records, or `false` to ignore changes

eventSegmentDrag

Fired on the owning Scheduler when event segments are dragged

// Adding a listener using the "on" method
eventSegmentDrag.on('eventSegmentDrag', ({ source, eventRecords, startDate, endDate, context, context.valid }) => {

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecords`	EventModel[]	Dragged segments
`startDate`	Date	Start date for the current location
`endDate`	Date	End date for the current location
`context`	Object
`context.valid`	Boolean	Set this to `false` to signal that the current drop position is invalid.

eventSegmentDragAbort

Fired on the owning Scheduler after an event segment drag operation has been aborted

// Adding a listener using the "on" method
eventSegmentDrag.on('eventSegmentDragAbort', ({ source, eventRecords }) => {

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecords`	EventModel[]	Dragged segments

eventSegmentDragReset

Fired on the owning Scheduler after an event segment drag operation regardless of the operation being cancelled or not

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

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance

eventSegmentDragStart

Fired on the owning Scheduler when event segment dragging starts

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

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecords`	EventModel[]	Dragged segments
`event`	MouseEvent	Browser event

eventSegmentDrop

Fired on the owning Scheduler when an event segment is dropped

// Adding a listener using the "on" method
eventSegmentDrag.on('eventSegmentDrop', ({ source, eventRecords }) => {

});

Parameter	Type	Description
`source`	Scheduler
`eventRecords`	EventModel[]	Dropped segments

afterEventDropEventDrag

beforeDestroyEvents

beforeEventDragEventDrag

beforeEventDropFinalizeEventDrag

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

eventDragEventDrag

eventDragAbortEventDrag

eventDragModeChangeEventDrag

eventDragResetEventDrag

eventDragStartEventDrag

eventDropEventDrag

Event handlers

onAfterEventSegmentDrop

Called on the owning Scheduler after an event segment is dropped

new EventSegmentDrag({
    onAfterEventSegmentDrop({ source, eventRecords, valid, context }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`eventRecords`	EventModel[]	Dropped segments
`valid`	Boolean
`context`	Object

onBeforeEventSegmentDrag

Called on the owning Scheduler before event segment dragging starts. Return false to prevent the action.

new EventSegmentDrag({
    onBeforeEventSegmentDrag({ source, eventRecords, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecords`	EventModel[]	Segments to drag
`event`	MouseEvent	Browser event

onBeforeEventSegmentDropFinalize

Called on the owning Scheduler to allow implementer to use asynchronous finalization by setting context.async = true in the listener, to show a confirmation popup etc.

 scheduler.on('beforeEventSegmentDropFinalize', ({ context }) => {
     context.async = true;
     setTimeout(() => {
         // async code don't forget to call finalize
         context.finalize();
     }, 1000);
 })

For synchronous one-time validation, simply set context.valid to true or false.

 scheduler.on('beforeEventSegmentDropFinalize', ({ context }) => {
     context.valid = false;
 })

new EventSegmentDrag({
    onBeforeEventSegmentDropFinalize({ source, context }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`context`	Object
`context.async`	Boolean	Set true to not finalize the drag-drop operation immediately (e.g. to wait for user confirmation)
`context.eventRecords`	EventModel[]	Dragged segments
`context.valid`	Boolean	Set this to `false` to abort the drop immediately.
`context.finalize`	function	Call this method after an async finalization flow, to finalize the drag-drop operation. This method accepts one argument: pass `true` to update records, or `false` to ignore changes

onEventSegmentDrag

Called on the owning Scheduler when event segments are dragged

new EventSegmentDrag({
    onEventSegmentDrag({ source, eventRecords, startDate, endDate, context }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecords`	EventModel[]	Dragged segments
`startDate`	Date	Start date for the current location
`endDate`	Date	End date for the current location
`context`	Object
`context.valid`	Boolean	Set this to `false` to signal that the current drop position is invalid.

onEventSegmentDragAbort

Called on the owning Scheduler after an event segment drag operation has been aborted

new EventSegmentDrag({
    onEventSegmentDragAbort({ source, eventRecords }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecords`	EventModel[]	Dragged segments

onEventSegmentDragReset

Called on the owning Scheduler after an event segment drag operation regardless of the operation being cancelled or not

new EventSegmentDrag({
    onEventSegmentDragReset({ source }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance

onEventSegmentDragStart

Called on the owning Scheduler when event segment dragging starts

new EventSegmentDrag({
    onEventSegmentDragStart({ source, eventRecords, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecords`	EventModel[]	Dragged segments
`event`	MouseEvent	Browser event

onEventSegmentDrop

Called on the owning Scheduler when an event segment is dropped

new EventSegmentDrag({
    onEventSegmentDrop({ source, eventRecords }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`eventRecords`	EventModel[]	Dropped segments

onAfterEventDropEventDrag

onBeforeDestroyEvents

onBeforeEventDragEventDrag

onBeforeEventDropFinalizeEventDrag

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

onEventDragEventDrag

onEventDragAbortEventDrag

onEventDragModeChangeEventDrag

onEventDragResetEventDrag

onEventDragStartEventDrag

onEventDropEventDrag

Typedefs

AssignmentDropDataEventDrag

BryntumListenerConfigEvents

DropDataEventDrag

EventDropDataEventDrag

EventSegmentDrag

Configs

Common

Misc

Other

Properties

Common

Class hierarchy

Lifecycle

Misc

Other

Functions

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs