CalendarDrag

This feature provides drag-based event creation and modification for Calendars. When enabled (which is the default for calendars), the user can do the following via the mouse or touch screen:

Create events by touching (or pressing the mouse button in) an the empty space and dragging. As the drag progresses, a tentative event is rendered. On release, the EventEdit feature displays the event edit dialog to complete the process. This can be disabled via the creatable config.
Adjust the start or end times of an event in the day or week views by dragging the top or bottom of an event. This can be disabled via the resizable config or the resizable field on a per-event basis.
Adjust the start or end date of an all-day event in the month view by dragging the left-most or right-most end of an event. This can be disabled via the resizable config or the resizable field on a per-event basis.
Move an event from its current time (in day or week views) or date (in all views except agenda) by dragging the body of an event. This can be disabled via the draggable config or via the draggable field on a per-event basis.

 // change name for events created by drag to "Event":
 let calendar = new Calendar({
     features : {
         drag : {
             newName : 'Event'
         }
     }
 });

The events triggered by this feature are triggered through the client Calendar instance.

Asynchronous validation of resize, move and create operations

You can easily add a confirmation step after an operation to show a dialog to the end user. This is done using the beforeDragMoveEnd, beforeDragCreateEnd and beforeDragResizeEnd events.

 let calendar = new Calendar({
     listeners : {
         // Async event listeners allowing you to veto drag operations
         beforeDragMoveEnd : async({ eventRecord }) => {
              const result = await MessageDialog.confirm({
                  title   : 'Please confirm',
                  message : 'Is this the start time you wanted?'
              });

              // Return true to accept the drop or false to reject it
              return result === MessageDialog.yesButton;
          },
          beforeDragResizeEnd : async({ eventRecord }) => {
              const result = await MessageDialog.confirm({
                  title   : 'Please confirm',
                  message : 'Is this the duration you wanted?'
              });

              // Return true to accept the drop or false to reject it
              return result === MessageDialog.yesButton;
          },
          beforeDragCreateEnd : async({ eventRecord }) => {
              const result = await MessageDialog.confirm({
                  title   : 'Please confirm',
                  message : 'Want to create this event?'
              });

              // Return true to accept the drop or false to reject it
              return result === MessageDialog.yesButton;
          }
      }
 });

Converting "All day" events to intra day events

You may drag an "All day" event out of the top row of a DayView and into the body of the view.

The event's duration will be preserved if possible.

If the newly calculated end time (based on the dropped-at time and the duration of the event) will overflow the end of that date then the event is converted to the duration configured in the DayView's autoCreate.

This feature is enabled by default.

The example below demonstrates validation of drag gestures so that no event intersects with any TimeRange which have its disabled field set.

Calendar drag

//<code-header>
fiddle.title = 'Calendar drag';
CSSHelper.insertRule('.b-cal-time-range-body { background: var(--b-calendar-time-range-header-background); }', targetElement.getRootNode());
//</code-header>
const calendar = new Calendar({
    appendTo : targetElement,
    height   : 700,

    // We have a little less width in our context, so reduce the responsive breakpoints
    responsive : {
        small : {
            when : 480
        },
        medium : {
            when : 640
        }
    },

    // Start life looking at this date
    date : '2020-03-01',

    // Used to create view titles
    dateFormat : 'DD MMM YYYY',

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        transport : {
            load : {
                url : 'data/Calendar/examples/feature/company-events.json'
            }
        },
        autoLoad : true
    },

    // Features named by the properties are included.
    // An object is used to configure the feature.
    features : {
        timeRanges : true,
        // One feature, "drag" handles move, resize and create drag gestures.
        drag       : {
            // Each drag mode has a separate validation callback.
            // We route them all to one on the calendar instance
            validateCreateFn : 'up.validateDrag',
            validateMoveFn   : 'up.validateDrag',
            validateResizeFn : 'up.validateDrag'
        }
    },

    onBeforeAutoCreate({ view, startDate, endDate }) {
        return this.validateEventDates(view, startDate, endDate);
    },

    // Check that we never schedule anything that intersects with a disabled timeRange
    validateDrag({ drag, eventRecord }) {
        return this.validateEventDates(drag.target.view, eventRecord.startDate, eventRecord.endDate);
    },

    validateEventDates(view, startDate, endDate) {
        // If creating in a DayView, enforce disabled time ranges.
        if (view.isDayView) {
            // If any of the disabled time ranges intersect with the event being created or moved,
            // then we cannot allow the drag.
            if (view.getTimeRanges(view.startDate, view.endDate).some(timeRange => {
                if (timeRange.disabled) {
                    if (DateHelper.intersectSpans(startDate, endDate, timeRange.startDate, timeRange.endDate)) {
                        Toast.show(`That would interrupt ${timeRange.name} - ${DateHelper.format(timeRange.startDate, 'HH:mm')} to ${DateHelper.format(timeRange.endDate, 'HH:mm')}`);
                        return true;
                    }
                }
            })) {
                return false;
            }
        }

        return true;
    },

    // Modes are the views available in the Calendar.
    // An object is used to configure the view.
    modes : {
        agenda : null,
        year   : null,
        week   : {
            dayStartTime : 8
        },
        day : {
            dayStartTime : 8
        }
    },

    // Start life with the week mode in view
    mode : 'week'
});

Configs

Common

disabledInstancePlugin

listenersEvents

Other

creatable: Boolean

Specify false to disallow creating events by drag gestures.

draggable: Boolean

Specify false to disallow dragging events to new times or days.

durationUnit: String

The durationUnit to use when drag-creating events.

If not specified, the dragUnit property of the active view's autoCreate is used.

For DayViews, this is normally 'hour', for views with a granularity level of one day, the default is 'day'.

newName: String | function

The name of new events or a function to call with the event record that will return the event name.

If a function is supplied, it is called in the scope of (the this reference is set to) the view being dragged within.

Cpnfigure as null to use the dragged-in view's autoCreate newName property.

Parameter	Type	Description
`eventRecord`	EventModel	The record being drag-created.

Returns: String -

Name of new event

recurrenceTip: String

The text to display as a hint for creating recurring events during drag. This tip is displayed in the tooltip in the same place as the recurrence summary (when there is no recurrence to display).

removeFromExternalStore: Boolean= trueAlso a property

By default, when an event is dragged from an external source, the event is removed from the source EventStore. Configure this as false to leave the event in place to allow for the dragging in of the same event repeatedly.

resizable: Boolean

Specify false to disallow dragging the edges of events to change their start or end.

validateCreateFn: function | String

An empty function by default that allows you to perform custom validation on an event being created by a drag gesture.

The drag context contains the following data items (see get):

eventDragMode : The CalendarDragMode object describing the drag operation.
eventCreate : The CalendarHit object that describes the target of the drag operation.

Return false to cancel the create operation.

Note that the Calendar also offers the beforeAutoCreate event which is triggered on drag start. Returning false from that event listener will also prevent the starting of the drag-create gesture.

This function can return a Promise (i.e., it can be async).

Example:

 let calendar = new Calendar({
     features : {
         drag : {
             async validateCreateFn({ eventRecord, drag }) {
                 // This method can be async so it can make ajax requests or interact
                 // with the user...

                 // if we return false, the event will be discarded

                 // The following is equivalent to returning false:
                 //
                 // return {
                 //     // Do not add the event to the store
                 //     add  : false,
                 //     // Do not display the edit dialog (in the eventEdit feature):
                 //     edit : false
                 // };
                 //
                 // This simply adds the event and does not display the editor:
                 //
                 return {
                     edit : false
                 };

                 // To do delay adding the event until the editor is done (and
                 // not via Cancel):
                 // return {
                 //     add : false
                 // };
             }
         }
     }
 });

or:

 let calendar = new Calendar({
     features : {
         drag : {
             // Will resolve on the Calendar
             validateCreateFn : 'up.validateCreate'
         }
     },
     validateCreate{ eventRecord, drag } {
         ...
     }
 });

Return true if the event should be added to the event store and to inform the eventEdit feature to display the edit dialog.

If this function returns an object, the add property can be set to false to prevent adding to the event store, and the edit property can be set to false to inform the eventEdit feature not to display the edit dialog.

Parameter	Type	Description
`info`	Object
`info.drag`	DragContext	The drag create context.
`info.event`	Event	The browser event object.
`info.view`	CalendarView	The Calendar widget in which the drag is taking place.
`info.eventRecord`	EventModel	The Event record.

Returns: Boolean | ValidateCreateResult -

Return false if this event should be rejected.

validateMoveFn: function | String

An empty function by default that allows you to perform custom validation on the event being moved to a new date or time via a drag gesture.

The drag context contains the following data items (see get):

eventDragMode : The CalendarDragMode object describing the drag operation.
eventRecord : The event record being moved.
eventSourceHit : The CalendarHit object that describes the source of the drag operation.

Return false to cancel the operation.

This function can return a Promise (i.e., it can be async).

Example:

 let calendar = new Calendar({
     features : {
         drag : {
             async validateMoveFn({ eventRecord, drag }) {
                 // This method can be async so it can make ajax requests or interact
                 // with the user...

                 // if we return false, the event move will be discarded
             }
         }
     }
 });

or:

 let calendar = new Calendar({
     features : {
         drag : {
             // Will resolve on the Calendar
             validateMoveFn : 'up.validateMove'
         }
     },
     validateMove{ eventRecord, drag } {
         ...
     }
 });

Parameter	Type	Description
`info`	Object
`info.drag`	DragContext	The drag create context.
`info.event`	Event	The browser event object.
`info.view`	CalendarView	The Calendar widget in which the drag is taking place.
`info.eventRecord`	EventModel	A proxy event record which is updated during the drag operation to create the UI. This record is not the original event record. The original event record is unchanged until the drag operation is complete.

Returns: Boolean -

Return false if this event change should be rejected.

validateResizeFn: function | String

An empty function by default that allows you to perform custom validation on the event whose startDate or endDate is being modified via drag gesture.

The drag context contains the following data items (see get):

eventDragMode : The CalendarDragMode object describing the drag operation.
eventSourceHit : The CalendarHit object that describes the source of the drag operation.

Return false to cancel the operation.

This function can return a Promise (i.e., it can be async).

Example:

 let calendar = new Calendar({
     features : {
         drag : {
             async validateResizeFn({ eventRecord, drag }) {
                 // This method can be async so it can make ajax requests or interact
                 // with the user...

                 // if we return false, the event change will be discarded
             }
         }
     }
 });

or:

 let calendar = new Calendar({
     features : {
         drag : {
             // Will resolve on the Calendar
             validateResizeFn : 'up.validateResize'
         }
     },
     validateResize{ eventRecord, drag } {
         ...
     }
 });

Parameter	Type	Description
`info`	Object
`info.drag`	DragContext	The drag create context.
`info.event`	Event	The browser event object.
`info.view`	CalendarView	The Calendar widget in which the drag is taking place.
`info.eventRecord`	EventModel	A proxy event record which is updated during the drag operation to create the UI. This record is not the original event record. The original event record is unchanged until the drag operation is complete.

Returns: Boolean | Promise -

Return false if this event change should be rejected.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isCalendarDrag: Boolean= truereadonly

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

isCalendarDrag: Boolean= truereadonlystatic

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

isCalendarFeatureCalendarFeature

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Functions

Configuration

applyDefaultsstaticBase

Events

detachListenersBase

Lifecycle

constructBase

constructorBase

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

beforeDragCreate

This event fires on the owning Calendar before a drag creation gesture is started. Return false to veto the operation.

// Adding a listener using the "on" method
calendarDrag.on('beforeDragCreate', ({ source, drag, domEvent, date, resourceRecord, feature, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`domEvent`	Event	The browser event.
`date`	Date	The date at the drag DOM event position.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`view`	CalendarView	The Calendar widget in which the drag is being started.

beforeDragCreateEnd

This event fires on the owning Calendar before a drag creation gesture is completed. Return false to immediately veto the operation or a Promise yielding true or false for async vetoing.

// Adding a listener using the "on" method
calendarDrag.on('beforeDragCreateEnd', ({ source, drag, event, eventRecord, newStartDate, newEndDate, resourceRecord, feature, validation, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record being created that has not yet been added in the store.
`newStartDate`	Date	The new start date.
`newEndDate`	Date	The new end date.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateCreateFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

beforeDragMove

This event fires on the owning Calendar before a drag move gesture is started. Return false to veto the operation.

// Adding a listener using the "on" method
calendarDrag.on('beforeDragMove', ({ source, drag, domEvent, eventRecord, date, resourceRecord, feature, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag move context.
`domEvent`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record being moved.
`date`	Date	The date at the drag DOM event position.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`view`	CalendarView	The Calendar widget in which the drag is being started.

beforeDragMoveEnd

This event fires on the owning Calendar before a drag move gesture is completed. Return false to immediately veto the operation or a Promise yielding true or false for async vetoing.

// Adding a listener using the "on" method
calendarDrag.on('beforeDragMoveEnd', ({ source, drag, event, eventRecord, proxyEventRecord, newStartDate, newEndDate, resourceRecord, feature, validation, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record that has not yet been updated in the store.
`proxyEventRecord`	EventModel	The `EventModel` record that is being used as a proxy for the drag operation and being updated on every pointer move. This will contain changed values based on the drag position.
`newStartDate`	Date	The new start date.
`newEndDate`	Date	The new end date.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateMoveFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

beforeDragResize

This event fires on the owning Calendar before a drag resize gesture is started. Return false to veto the operation.

// Adding a listener using the "on" method
calendarDrag.on('beforeDragResize', ({ source, drag, domEvent, eventRecord, date, resourceRecord, feature, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag resize context.
`domEvent`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record being resized.
`date`	Date	The date at the drag DOM event position.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`view`	CalendarView	The Calendar widget in which the drag is being started.

beforeDragResizeEnd

This event fires on the owning Calendar before a drag resize gesture is completed. Return false to immediately veto the operation or a Promise yielding true or false for async vetoing.

// Adding a listener using the "on" method
calendarDrag.on('beforeDragResizeEnd', ({ source, drag, event, eventRecord, proxyEventRecord, newStartDate, newEndDate, feature, validation, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record that has not yet been updated in the store.
`proxyEventRecord`	EventModel	The `EventModel` record that is being used as a proxy for the drag operation and being updated on every pointer move. This will contain changed values based on the drag position.
`newStartDate`	Date	The new start date.
`newEndDate`	Date	The new end date.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateResizeFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

dragCreateEnd

This event fires on the owning Calendar when a drag creation gesture is completed.

// Adding a listener using the "on" method
calendarDrag.on('dragCreateEnd', ({ source, drag, event, eventRecord, resourceRecord, feature, validation, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The new `EventModel` record added in the store.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateCreateFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

dragMoveEnd

This event fires on the owning Calendar when a drag move gesture is completed. The eventRecord has already been added to the eventStore of the owning calendar.

// Adding a listener using the "on" method
calendarDrag.on('dragMoveEnd', ({ source, drag, event, eventRecord, resourceRecord, feature, validation, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The updated `EventModel` record.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateMoveFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

dragResizeEnd

This event fires on the owning Calendar when a drag resize gesture is completed.

// Adding a listener using the "on" method
calendarDrag.on('dragResizeEnd', ({ source, drag, event, eventRecord, feature, validation, view }) => {

});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The updated `EventModel` record.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateResizeFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeDragCreate

This event called on the owning Calendar before a drag creation gesture is started. Return false to veto the operation.

new CalendarDrag({
    onBeforeDragCreate({ source, drag, domEvent, date, resourceRecord, feature, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`domEvent`	Event	The browser event.
`date`	Date	The date at the drag DOM event position.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`view`	CalendarView	The Calendar widget in which the drag is being started.

onBeforeDragCreateEnd

This event called on the owning Calendar before a drag creation gesture is completed. Return false to immediately veto the operation or a Promise yielding true or false for async vetoing.

new CalendarDrag({
    onBeforeDragCreateEnd({ source, drag, event, eventRecord, newStartDate, newEndDate, resourceRecord, feature, validation, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record being created that has not yet been added in the store.
`newStartDate`	Date	The new start date.
`newEndDate`	Date	The new end date.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateCreateFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

onBeforeDragMove

This event called on the owning Calendar before a drag move gesture is started. Return false to veto the operation.

new CalendarDrag({
    onBeforeDragMove({ source, drag, domEvent, eventRecord, date, resourceRecord, feature, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag move context.
`domEvent`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record being moved.
`date`	Date	The date at the drag DOM event position.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`view`	CalendarView	The Calendar widget in which the drag is being started.

onBeforeDragMoveEnd

This event called on the owning Calendar before a drag move gesture is completed. Return false to immediately veto the operation or a Promise yielding true or false for async vetoing.

new CalendarDrag({
    onBeforeDragMoveEnd({ source, drag, event, eventRecord, proxyEventRecord, newStartDate, newEndDate, resourceRecord, feature, validation, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record that has not yet been updated in the store.
`proxyEventRecord`	EventModel	The `EventModel` record that is being used as a proxy for the drag operation and being updated on every pointer move. This will contain changed values based on the drag position.
`newStartDate`	Date	The new start date.
`newEndDate`	Date	The new end date.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateMoveFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

onBeforeDragResize

This event called on the owning Calendar before a drag resize gesture is started. Return false to veto the operation.

new CalendarDrag({
    onBeforeDragResize({ source, drag, domEvent, eventRecord, date, resourceRecord, feature, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag resize context.
`domEvent`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record being resized.
`date`	Date	The date at the drag DOM event position.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`view`	CalendarView	The Calendar widget in which the drag is being started.

onBeforeDragResizeEnd

This event called on the owning Calendar before a drag resize gesture is completed. Return false to immediately veto the operation or a Promise yielding true or false for async vetoing.

new CalendarDrag({
    onBeforeDragResizeEnd({ source, drag, event, eventRecord, proxyEventRecord, newStartDate, newEndDate, feature, validation, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The `EventModel` record that has not yet been updated in the store.
`proxyEventRecord`	EventModel	The `EventModel` record that is being used as a proxy for the drag operation and being updated on every pointer move. This will contain changed values based on the drag position.
`newStartDate`	Date	The new start date.
`newEndDate`	Date	The new end date.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateResizeFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

onDragCreateEnd

This event called on the owning Calendar when a drag creation gesture is completed.

new CalendarDrag({
    onDragCreateEnd({ source, drag, event, eventRecord, resourceRecord, feature, validation, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The new `EventModel` record added in the store.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateCreateFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

onDragMoveEnd

This event called on the owning Calendar when a drag move gesture is completed. The eventRecord has already been added to the eventStore of the owning calendar.

new CalendarDrag({
    onDragMoveEnd({ source, drag, event, eventRecord, resourceRecord, feature, validation, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The updated `EventModel` record.
`resourceRecord`	ResourceModel	The `ResourceModel` record if the gesture was performed in a resource-type view.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateMoveFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

onDragResizeEnd

This event called on the owning Calendar when a drag resize gesture is completed.

new CalendarDrag({
    onDragResizeEnd({ source, drag, event, eventRecord, feature, validation, view }) {

    }
});

Parameter	Type	Description
`source`	Calendar	The Calendar instance that fired the event.
`drag`	DragContext	The drag create context.
`event`	Event	The browser event.
`eventRecord`	EventModel	The updated `EventModel` record.
`feature`	CalendarDrag	The Calendar drag feature instance.
`validation`	Boolean \| ValidateCreateResult	The result of the validateResizeFn if one was provided.
`view`	CalendarView	The Calendar widget in which the drag completed.

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

CalendarDragMode

An immutable object that describes a calendar drag mode. These objects are used to simplify detecting the drag mode to apply appropriate actions.

Parameter	Type	Description
`type`	create \| move \| resize	The value `'create'`, `'move'`, or `'resize'`.
`create`	Boolean	The value `true` if `type === 'create'`, otherwise `false`.
`move`	Boolean	The value `true` if `type === 'move'`, otherwise `false`.
`resize`	Boolean	The value `true` if `type === 'resize'`, otherwise `false`.

ValidateCreateResult

Format expected to be returned in a validateCreateFn

Parameter	Type	Description
`add`	Boolean	Allow adding to store
`edit`	Boolean	Allow editor to open

BryntumListenerConfigEvents