EventDragCreate
Feature
Feature that allows the user to create new events by dragging in empty parts of the scheduler rows.
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.
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 |
See also
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Number of pixels the drag target must be moved before dragging is considered to have started. Defaults to 2.
-
true to show a time tooltip when dragging to create a new event
-
thisreference for the validatorFn -
Set to
trueto allow resizing to a zero-duration span -
Use bottom handle when resizing. Only applies when owning client's
directionis 'vertical' -
The amount of pixels to move pointer/mouse before it counts as a drag operation.
-
The amount of time (ms) to delay a touch-resize interaction.
-
Automatically shrink virtual handles when available space < handleSize. The virtual handles will decrease towards width/height 1, reserving space between opposite handles to for example leave room for dragging. To configure reserved space, see reservedSpace.
-
Use left handle when resizing. Only applies when owning client's
directionis 'horizontal' -
Room in px to leave unoccupied by handles when shrinking them dynamically (see dynamicHandleSize).
-
Use right handle when resizing. Only applies when owning client's
directionis 'horizontal' -
true to see exact event length during resizing
-
Use top handle when resizing. Only applies when owning client's direction` is 'vertical'
-
Internal listeners, that cannot be removed by the user.
-
The widget which this plugin is to attach to.
Has a corresponding runtime client property.
-
Set to
falseto disable localization of this object.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of EventDragCreate class, or subclass thereof.
-
Identifies an object as an instance of Events class, or subclass thereof.
-
Identifies an object as an instance of Localizable class, or subclass thereof.
-
A class property getter for the default values of internal properties for this class.
-
An empty array that can be used as a default value.
-
An empty object that can be used as a default value.
-
Identifies an object as an instance of DragCreateBase class, or subclass thereof.
-
Identifies an object as an instance of EventDragCreate class, or subclass thereof.
-
Identifies an object as an instance of EventResize class, or subclass thereof.
-
Identifies an object as an instance of InstancePlugin class, or subclass thereof.
-
Returns true if resizing multiple events
-
Returns true if a resize operation is active
-
Returns a copy of the full configuration which was used to configure this object.
-
This property is set to
truebefore theconstructorreturns. -
This property is set to
trueon entry to the destroy method. It remains on the objects after returning fromdestroy(). If isDestroyed istrue, this property will also betrue, so there is no need to test for both (for example,comp.isDestroying || comp.isDestroyed). -
The Widget which was passed into the constructor, which is the Widget we are providing extra services for.
Has a corresponding client config.
-
Get the global LocaleHelper
-
Get the global LocaleManager
Functions
Functions are methods available for calling on the class-
This optional class method is called when a class is mixed in using the mixin() method.
-
Registers this class type with its Factory
-
Validates that the resized event has a valid size based on configuration. Returns true if zero-size events are allowed or if snapping is enabled. Otherwise checks that the event duration is non-zero.
-
Highlights handles (applies css that changes cursor).
-
Unhighlight handles (removes css).
-
Internal function used to hook destroy() calls when using thisObj
-
Internal function used restore hooked destroy() calls when using thisObj
-
Auto detaches listeners registered from start, if set as detachable
-
Internal function used to run a callback function after an event is triggered
-
Removes all listeners registered to this object by the application.
-
This will merge a feature's (subclass of InstancePlugin) keyMap with it's client's keyMap.