EventDragCreate
Feature

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

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

Useful configs and functions

Member	Description
beforeDragCreate	Fires before drag-create starts
dragCreateStart	Fires when drag-create begins
beforeDragCreateFinalize	Async finalizer before creation completes
dragCreateEnd	Fires when drag-create ends
afterDragCreate	Fires after event is created
lockLayout	Lock row layout during drag-create

Configs

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

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.
Parameters
- context : Object
  
  A drag create context
- startDate : Date
  
  Event start date
- endDate : Date
  
  Event end date
- record : EventModel
  
  Event record
- resourceRecord : ResourceModel
  
  Resource record
- event : Event
  
  The event object
Returns

Boolean
:

true if this validation passes

Properties

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

isEventDragCreate : Booleantrue

READONLY

static

ADVANCED

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

isEventDragCreate : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

createEventRecord( drag )

private

Creates an event by the event object coordinates

Events

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

afterDragCreate

ON-OWNER

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

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

PREVENTABLE

ON-OWNER
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();
        }
    }
});
```
Note that this event is triggered on the owning widget:
beforeDragCreateFinalize

ON-OWNER
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.

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

ON-OWNER

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

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

ON-OWNER

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

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

onAfterDragCreate

ON-OWNER

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

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

PREVENTABLE

ON-OWNER
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();
        }
    }
});
```
Note that this handler is called on the owning widget:
onBeforeDragCreateFinalize

ON-OWNER
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.

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

ON-OWNER

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

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

ON-OWNER

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

Note that this handler is called on the owning widget:

id: eventDragCreate

Source path

Scheduler/feature/EventDragCreate.js

Demo

examples/basic

EventDragCreate
Feature

Conditionally preventing drag creation

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Demo

Inheritance tree5

Mixins2

Contents

EventDragCreate Feature

Conditionally preventing drag creation

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Demo

Inheritance tree5

Mixins2

Contents

EventDragCreate
Feature