EventResize
Feature

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.

Customizing the resize tooltip

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.

Useful configs and functions

Member	Description
beforeEventResize	Fires before resize starts
eventResizeStart	Fires when resize begins
eventPartialResize	Fires continuously during resize
beforeEventResizeFinalize	Async finalizer before resize completes
eventResizeEnd	Fires when resize ends
tooltipTemplate	Template for the resize tooltip

Configs

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

allowResizeToZero : Booleanfalse

Set to true to allow resizing to a zero-duration span
bottomHandle : Booleantrue

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

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

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

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 : Booleantrue

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 : Number1

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

Set to false to not resize all selected events simultaneously.

Please note that multiEventSelect needs to be enabled for it to work
rightHandle : Booleantrue

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

true to see exact event length during resizing
showTooltip : Booleantrue

false to not show a tooltip while resizing
tip : Tooltip/TooltipConfig

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

Has a corresponding runtime tip property.
tooltipTemplate : Function
A template function returning the content to show during a resize operation.
Parameters
- context : Object
  
  A context object
- startDate : Date
  
  New start date
- endDate : Date
  
  New end date
- record : TimeSpan
  
  The record being resized
- valid : Boolean
  
  Whether the current resize position is valid
- startClockHtml : String
  
  Predefined HTML to show the start time
- endClockHtml : String
  
  Predefined HTML to show the end time
Returns

String
:

String representing the HTML markup
topHandle : Booleantrue

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.
Parameters
- context : Object
  
  The resize context, contains the record & dates.
- record : TimeSpan
  
  The record being resized.
- startDate : Date
  
  The new start date.
- endDate : Date
  
  The new end date.
- originalStartDate : Date
  
  Start date before resize
- originalEndDate : Date
  
  End date before resize
- event : Event
  
  The browser Event object
Returns

Boolean
validatorFnThisObj : Object

this reference for the validatorFn

Properties

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

isEventResize : Booleantrue

READONLY

static

ADVANCED

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

isMultiResizing : Boolean

private

READONLY

Returns true if resizing multiple events
isResizing : Boolean

READONLY

Returns true if a resize operation is active
tip : Tooltip/TooltipConfig

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.

Has a corresponding tip config.
isEventResize : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

checkResizeHandles( event )

private

Check if mouse is over a resize handle (virtual). If so, highlight.
hasValidSize( )

private

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.
highlightHandle( )

private

Highlights handles (applies css that changes cursor).
unHighlightHandle( )

private

Unhighlight handles (removes css).

Events

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

beforeEventResize

PREVENTABLE

ON-OWNER

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

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

ASYNC

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

ON-OWNER

Fires on the owning Scheduler on each resize move event

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

ON-OWNER

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

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

ON-OWNER

Fires on the owning Scheduler when event resizing starts

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

onBeforeEventResize

PREVENTABLE

ON-OWNER

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

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

ASYNC

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

ON-OWNER

Called on the owning Scheduler on each resize move event

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

ON-OWNER

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

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

ON-OWNER

Called on the owning Scheduler when event resizing starts

Note that this handler is called on the owning widget:

Type definitions

EventResizeData
An object containing data related to event resize.
Properties
- 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

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-event-resize-handle-background	Resize handle background color
--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-max-size	Resize handle max height in horizontal mode, max width in vertical mode
--b-event-resize-handle-other-size	Resize handle width in horizontal mode, height in vertical mode. Must use px values
--b-event-resize-handle-size	Resize handle height in horizontal mode, width in vertical mode
--b-event-resize-handle-zindex	Resize handle z-index
Hovered
--b-event-resize-handle-hover-background	Resize handle background color when 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

id: eventResize

Source path

Scheduler/feature/EventResize.js

Demo

examples/basic

EventResize
Feature

Customizing the resize tooltip

Useful configs and functions

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

Type definitions

Properties

CSS variables

Source path

Demo

Inheritance tree3

Mixins2

Contents

EventResize Feature

Customizing the resize tooltip

Useful configs and functions

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

Type definitions

Properties

CSS variables

Source path

Demo

Inheritance tree3

Mixins2

Contents

EventResize
Feature