EventResize

Feature that allows resizing an event by dragging its end.

By default, it displays a tooltip with the new start and end dates, formatted using displayDateFormat.

Event resize

//<code-header>
fiddle.title = 'Event resize';
//</code-header>
targetElement.innerHTML = '<p>Grab either end of an event and drag to resize it:</p>';
const scheduler         = new Scheduler({
    appendTo : targetElement,

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

    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' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Resize me', startDate : '2018-05-07', endDate : '2018-05-10' },
        { id : 2, resourceId : 2, name : 'Not me', startDate : '2018-05-08', endDate : '2018-05-10', resizable : false, eventColor : 'red' }
    ]
});

To show custom HTML in the tooltip, please see the tooltipTemplate config. Example:

eventResize : {
    // A minimal end date tooltip
    tooltipTemplate : ({ record, endDate }) => {
        return DateHelper.format(endDate, 'MMM D');
    }
}

This feature is enabled by default

This feature is extended with a few overrides by the Gantt's TaskResize feature.

This feature updates the event's startDate or endDate live in order to leverage the rendering pathway to always yield a correct appearance. The changes are done in batched mode so that changes do not become eligible for data synchronization or propagation until the operation is completed.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

allowResizeToZero: Boolean= false

Set to true to allow resizing to a zero-duration span

bottomHandle: Boolean= true

Use bottom handle when resizing. Only applies when owning client's direction is 'vertical'

dragThreshold: Number= 0

The amount of pixels to move pointer/mouse before it counts as a drag operation.

dragTouchStartDelay: Number= 300

The amount of time (ms) to delay a touch-resize interaction.

dynamicHandleSize: Boolean= false

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.

leftHandle: Boolean= true

Use left handle when resizing. Only applies when owning client's direction is 'horizontal'

lockLayout: Boolean | minimal-updates

Locks the layout during drag resize, opt out to use the same rendering pathway for drag resize as for already existing events (updating the layout of all events during the resize operation).

Keeping this config enabled also leads to cheaper resizing, only the resized event's resources are refreshed during the operation.

For even cheaper resizing, configure it as 'minimal-updates'. In this mode, only the resized event is refreshed during the operation (not the other events assigned to the same resource).

reservedSpace: Number= 1

Room in px to leave unoccupied by handles when shrinking them dynamically (see dynamicHandleSize).

resizeSelected: Boolean= true

Set to false to not resize all selected events simultaneously.

Please note that multiEventSelect needs to be enabled for it to work

rightHandle: Boolean= true

Use right handle when resizing. Only applies when owning client's direction is 'horizontal'

showExactResizePosition: Boolean= false

true to see exact event length during resizing

showTooltip: Boolean= true

false to not show a tooltip while resizing

tip: Tooltip | TooltipConfigAlso a property

If a tooltip is required to illustrate the resize, specify this as true, or a config object for the Tooltip.

tooltipTemplate: function

A template function returning the content to show during a resize operation.

Parameter	Type	Description
`context`	Object	A context object
`context.startDate`	Date	New start date
`context.endDate`	Date	New end date
`context.record`	TimeSpan	The record being resized
`context.valid`	Boolean	Whether the current resize position is valid
`context.startClockHtml`	String	Predefined HTML to show the start time
`context.endClockHtml`	String	Predefined HTML to show the end time

Returns: String -

String representing the HTML markup

topHandle: Boolean= true

Use top handle when resizing. Only applies when owning client's direction` is 'vertical'

validatorFn: function

An empty function by default, but provided so that you can perform custom validation on the item being resized. Return true if the new duration is valid, false to signal that it is not.

Parameter	Type	Description
`context`	Object	The resize context, contains the record & dates.
`context.record`	TimeSpan	The record being resized.
`context.startDate`	Date	The new start date.
`context.endDate`	Date	The new end date.
`context.originalStartDate`	Date	Start date before resize
`context.originalEndDate`	Date	End date before resize
`event`	Event	The browser Event object

Returns: Boolean

validatorFnThisObj: Object

this reference for the validatorFn

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isEventResize: Boolean= truereadonly

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

isEventResize: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

isResizing: Booleanreadonly

Returns true if a resize operation is active

tip: Tooltip | TooltipConfigAlso a config

Setting this property may change the configuration of the tip, or cause it to be destroyed if null is passed.

Reading this property returns the Tooltip instance.

catchEventHandlerExceptionsEvents

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

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

beforeEventResize

Fired on the owning Scheduler before resizing starts. Return false to prevent the action.

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

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecord`	EventModel	Event record being resized
`resourceRecord`	ResourceModel	Resource record the resize starts within
`event`	MouseEvent	Browser event

beforeEventResizeFinalize

Fired on the owning Scheduler to allow implementer to prevent immediate finalization by returning a promise in the listener, to show a confirmation popup etc

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

// Adding a listener using the "on" method
eventResize.on('beforeEventResizeFinalize', ({ source, context, eventRecord, startDate, endDate, originalStartDate, originalEndDate, async, finalize, event, resizeData }) => {

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`context`	Object	[DEPRECATED] de-nested to outer params object
`eventRecord`	EventModel	Event record being resized
`startDate`	Date	New startDate (changed if resizing start side)
`endDate`	Date	New endDate (changed if resizing end side)
`originalStartDate`	Date	Start date before resize
`originalEndDate`	Date	End date before resize
`async`	Boolean	Set true to handle resize asynchronously (e.g. to wait for user confirmation)
`finalize`	function	Call this method to finalize resize. This method accepts one argument: pass `true` to update records, or `false`, to ignore changes
`event`	Event	Browser event
`resizeData`	EventResizeData[]	Data of all events that are being resized

eventPartialResize

Fires on the owning Scheduler on each resize move event

// Adding a listener using the "on" method
eventResize.on('eventPartialResize', ({ source, eventRecord, startDate, endDate, element, resizeData }) => {

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecord`	EventModel	Event record being resized
`startDate`	Date
`endDate`	Date
`element`	HTMLElement
`resizeData`	EventResizeData[]	Resize data for selected events

eventResizeEnd

Fires on the owning Scheduler after the resizing gesture has finished.

// Adding a listener using the "on" method
eventResize.on('eventResizeEnd', ({ source, changed, eventRecord, resizeData }) => {

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`changed`	Boolean	Shows if the record has been changed by the resize action
`eventRecord`	EventModel	Event record being resized
`resizeData`	EventResizeData[]	Resize data for selected events

eventResizeStart

Fires on the owning Scheduler when event resizing starts

// Adding a listener using the "on" method
eventResize.on('eventResizeStart', ({ source, eventRecord, resourceRecord, event, resizeData }) => {

});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecord`	EventModel	Event record being resized
`resourceRecord`	ResourceModel	Resource record the resize starts within
`event`	MouseEvent	Browser event
`resizeData`	EventResizeData[]	Resize data for selected events. Only available when resizeSelected is `true`

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeEventResize

Called on the owning Scheduler before resizing starts. Return false to prevent the action.

new EventResize({
    onBeforeEventResize({ source, eventRecord, resourceRecord, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecord`	EventModel	Event record being resized
`resourceRecord`	ResourceModel	Resource record the resize starts within
`event`	MouseEvent	Browser event

onBeforeEventResizeFinalize

Called on the owning Scheduler to allow implementer to prevent immediate finalization by returning a promise in the listener, to show a confirmation popup etc

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

new EventResize({
    onBeforeEventResizeFinalize({ source, context, eventRecord, startDate, endDate, originalStartDate, originalEndDate, async, finalize, event, resizeData }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`context`	Object	[DEPRECATED] de-nested to outer params object
`eventRecord`	EventModel	Event record being resized
`startDate`	Date	New startDate (changed if resizing start side)
`endDate`	Date	New endDate (changed if resizing end side)
`originalStartDate`	Date	Start date before resize
`originalEndDate`	Date	End date before resize
`async`	Boolean	Set true to handle resize asynchronously (e.g. to wait for user confirmation)
`finalize`	function	Call this method to finalize resize. This method accepts one argument: pass `true` to update records, or `false`, to ignore changes
`event`	Event	Browser event
`resizeData`	EventResizeData[]	Data of all events that are being resized

onEventPartialResize

Called on the owning Scheduler on each resize move event

new EventResize({
    onEventPartialResize({ source, eventRecord, startDate, endDate, element, resizeData }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecord`	EventModel	Event record being resized
`startDate`	Date
`endDate`	Date
`element`	HTMLElement
`resizeData`	EventResizeData[]	Resize data for selected events

onEventResizeEnd

Called on the owning Scheduler after the resizing gesture has finished.

new EventResize({
    onEventResizeEnd({ source, changed, eventRecord, resizeData }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`changed`	Boolean	Shows if the record has been changed by the resize action
`eventRecord`	EventModel	Event record being resized
`resizeData`	EventResizeData[]	Resize data for selected events

onEventResizeStart

Called on the owning Scheduler when event resizing starts

new EventResize({
    onEventResizeStart({ source, eventRecord, resourceRecord, event, resizeData }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	Scheduler instance
`eventRecord`	EventModel	Event record being resized
`resourceRecord`	ResourceModel	Resource record the resize starts within
`event`	MouseEvent	Browser event
`resizeData`	EventResizeData[]	Resize data for selected events. Only available when resizeSelected is `true`

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

EventResizeData

An object containing data related to event resize.

Parameter	Type	Description
`eventRecord`	EventModel	Event record being resized
`startDate`	Date	New startDate (changed if resizing start side)
`endDate`	Date	New endDate (changed if resizing end side)
`originalStartDate`	Date	Start date before resize
`originalEndDate`	Date	End date before resize
`element`	HTMLElement	The event element

BryntumListenerConfigEvents

CSS variables

Name	Description
`--b-event-resize-handle-other-size`	Resize handle width in horizontal mode, height in vertical mode. Must use px values
`--b-event-resize-handle-border-radius`	Resize handle border-radius
`--b-event-resize-handle-inset`	Resize handle inset from event edge. Must use px values
`--b-event-resize-handle-size`	Resize handle height in horizontal mode, width in vertical mode
`--b-event-resize-handle-max-size`	Resize handle max height in horizontal mode, max width in vertical mode
`--b-event-resize-handle-zindex`	Resize handle z-index
`--b-event-resize-handle-background`	Resize handle background color
Hovered
`--b-event-resize-handle-hover-other-size`	Resize handle size when hovered. Width in horizontal mode, height in vertical mode. Must use px values
`--b-event-resize-handle-hover-size`	Resize handle height in horizontal mode, width in vertical mode when hovered
`--b-event-resize-handle-hover-background`	Resize handle background color when hovered

EventResize

Customizing the resize tooltip

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Other

Lifecycle

Misc

Functions

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs

CSS variables