EventDragCreate

Feature that allows the user to create new events by dragging in empty parts of the scheduler rows.

Event drag create

//<code-header>
fiddle.title = 'Event drag create';
//</code-header>
targetElement.innerHTML = '<p>Click and drag on empty area in the schedule to create an event:</p>';
const scheduler = new Scheduler({
    appendTo : targetElement,

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

    features : {
        eventEdit : false
    },

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

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

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

This feature is enabled by default.

Incompatible with the EventDragSelect and Pan features. If either of those features are enabled, this feature has no effect.

Conditionally preventing drag creation

To conditionally prevent drag creation for a certain resource or a certain timespan, you listen for the beforeDragCreate event, add your custom logic to it and return false to prevent the operation from starting. For example to not allow drag creation on the topmost resource:

const scheduler = new Scheduler({
    listeners : {
        beforeDragCreate({ resource }) {
            // Prevent drag creating on the topmost resource
            if (resource === scheduler.resourceStore.first) {
                return false;
            }
        }
    }
});

Configs

Common

disabledInstancePlugin

listenersEvents

Other

lockLayout: Boolean | minimal-updates= true

Locks the layout during drag create, overriding the default behaviour that uses the same rendering pathway for drag creation as for already existing events.

This more closely resembles the behaviour of versions prior to 4.2.0.

Enabling this config also leads to cheaper drag creation, only the events of the affected resource are refreshed during the operation.

For even cheaper drag creation, configure it as 'minimal-updates'. In this mode, no other events are updated during the operation.

validatorFn: function

An empty function by default, but provided so that you can perform custom validation on the event being created. Return true if the new event is valid, false to prevent an event being created.

Parameter	Type	Description
`context`	Object	A drag create context
`context.startDate`	Date	Event start date
`context.endDate`	Date	Event end date
`context.record`	EventModel	Event record
`context.resourceRecord`	ResourceModel	Resource record
`event`	Event	The event object

Returns: Boolean -

true if this validation passes

allowResizeToZeroEventResize

bottomHandleEventResize

catchEventHandlerExceptionsEvents

dragThresholdEventResize

dragToleranceDragCreateBase

dragTouchStartDelayEventResize

dynamicHandleSizeEventResize

leftHandleEventResize

reservedSpaceEventResize

resizeSelectedEventResize

rightHandleEventResize

showExactResizePositionEventResize

showTooltipDragCreateBase

tipEventResize

tooltipTemplateEventResize

topHandleEventResize

validatorFnThisObjDragCreateBase

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isEventDragCreate: Boolean= truereadonly

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

isEventDragCreate: Boolean= truereadonlystatic

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

isDragCreateBaseDragCreateBase

isEventResizeEventResize

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

isResizingEventResize

tipEventResize

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

afterDragCreate

Fires on the owning Scheduler at the end of the drag create gesture whether or not a new event was created by the gesture.

// Adding a listener using the "on" method
eventDragCreate.on('afterDragCreate', ({ source, eventRecord, resourceRecord, eventElement }) => {

});

Parameter	Type	Description
`source`	Scheduler
`eventRecord`	EventModel	The event record being created
`resourceRecord`	ResourceModel	The resource record
`eventElement`	HTMLElement	The element representing the created event record

beforeDragCreate

Fires on the owning Scheduler at the beginning of the drag gesture. Returning false from a listener prevents the drag create operation from starting.

const scheduler = new Scheduler({
    listeners : {
        beforeDragCreate({ date }) {
            // Prevent drag creating events in the past
            return date >= Date.now();
        }
    }
});

// Adding a listener using the "on" method
eventDragCreate.on('beforeDragCreate', ({ source, resourceRecord, date }) => {

});

Parameter	Type	Description
`source`	Scheduler
`resourceRecord`	ResourceModel
`date`	Date	The datetime associated with the drag start point.

beforeDragCreateFinalize

Fires on the owning Scheduler to allow implementer to prevent immediate finalization by setting data.context.async = true in the listener, to show a confirmation popup etc.

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

Note that at this point the new eventRecord does not yet have the dates set, you can instead find the dates in the context object.

// Adding a listener using the "on" method
eventDragCreate.on('beforeDragCreateFinalize', ({ source, eventRecord, resourceRecord, eventElement, context, context.startDate, context.endDate, context.async, context.finalize }) => {

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecord`	EventModel	The event record being created
`resourceRecord`	ResourceModel	The resource record
`eventElement`	HTMLElement	The element representing the new Event record
`context`	Object
`context.startDate`	Date	The start date of the event being created
`context.endDate`	Date	The end date of the event being created
`context.async`	Boolean	Set true to handle drag create asynchronously (e.g. to wait for user confirmation)
`context.finalize`	function	Call this method to finalize drag create. This method accepts one argument: pass true to update records, or false, to ignore changes

dragCreateEnd

Fires on the owning Scheduler after the new event has been created.

// Adding a listener using the "on" method
eventDragCreate.on('dragCreateEnd', ({ source, eventRecord, resourceRecord, event, eventElement }) => {

});

Parameter	Type	Description
`source`	Scheduler
`eventRecord`	EventModel	The new `EventModel` record.
`resourceRecord`	ResourceModel	The resource for the row in which the event is being created.
`event`	MouseEvent	The ending mouseup event.
`eventElement`	HTMLElement	The DOM element representing the newly created event un the UI.

dragCreateStart

Fires on the owning Scheduler after the drag start has created a new Event record.

// Adding a listener using the "on" method
eventDragCreate.on('dragCreateStart', ({ source, eventRecord, resourceRecord, eventElement }) => {

});

Parameter	Type	Description
`source`	Scheduler
`eventRecord`	EventModel	The event record being created
`resourceRecord`	ResourceModel	The resource record
`eventElement`	HTMLElement	The element representing the new event.

beforeDestroyEvents

beforeEventResizeEventResize

beforeEventResizeFinalizeEventResize

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

eventPartialResizeEventResize

eventResizeEndEventResize

eventResizeStartEventResize

Event handlers

onAfterDragCreate

Called on the owning Scheduler at the end of the drag create gesture whether or not a new event was created by the gesture.

new EventDragCreate({
    onAfterDragCreate({ source, eventRecord, resourceRecord, eventElement }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`eventRecord`	EventModel	The event record being created
`resourceRecord`	ResourceModel	The resource record
`eventElement`	HTMLElement	The element representing the created event record

onBeforeDragCreate

Called on the owning Scheduler at the beginning of the drag gesture. Returning false from a listener prevents the drag create operation from starting.

const scheduler = new Scheduler({
    listeners : {
        beforeDragCreate({ date }) {
            // Prevent drag creating events in the past
            return date >= Date.now();
        }
    }
});

new EventDragCreate({
    onBeforeDragCreate({ source, resourceRecord, date }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`resourceRecord`	ResourceModel
`date`	Date	The datetime associated with the drag start point.

onBeforeDragCreateFinalize

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

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

Note that at this point the new eventRecord does not yet have the dates set, you can instead find the dates in the context object.

new EventDragCreate({
    onBeforeDragCreateFinalize({ source, eventRecord, resourceRecord, eventElement, context }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecord`	EventModel	The event record being created
`resourceRecord`	ResourceModel	The resource record
`eventElement`	HTMLElement	The element representing the new Event record
`context`	Object
`context.startDate`	Date	The start date of the event being created
`context.endDate`	Date	The end date of the event being created
`context.async`	Boolean	Set true to handle drag create asynchronously (e.g. to wait for user confirmation)
`context.finalize`	function	Call this method to finalize drag create. This method accepts one argument: pass true to update records, or false, to ignore changes

onDragCreateEnd

Called on the owning Scheduler after the new event has been created.

new EventDragCreate({
    onDragCreateEnd({ source, eventRecord, resourceRecord, event, eventElement }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`eventRecord`	EventModel	The new `EventModel` record.
`resourceRecord`	ResourceModel	The resource for the row in which the event is being created.
`event`	MouseEvent	The ending mouseup event.
`eventElement`	HTMLElement	The DOM element representing the newly created event un the UI.

onDragCreateStart

Called on the owning Scheduler after the drag start has created a new Event record.

new EventDragCreate({
    onDragCreateStart({ source, eventRecord, resourceRecord, eventElement }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`eventRecord`	EventModel	The event record being created
`resourceRecord`	ResourceModel	The resource record
`eventElement`	HTMLElement	The element representing the new event.