EventSegmentResize

Feature that allows resizing an event segment by dragging its end.

Event segments

//<code-header>
fiddle.title = 'Event segments';
//</code-header>
const schedulerPro = new SchedulerPro({
    appendTo : targetElement,

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

    startDate : new Date(2022, 2, 20),
    endDate   : new Date(2022, 2, 27),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    project : {
        resources : [
            { id : 1, name : 'Bruce' },
            { id : 2, name : 'Diana' }
        ],

        events : [
            {
                id        : 1,
                name      : 'Art project',
                startDate : '2022-03-21',
                segments  : [
                    { startDate : '2022-03-21', duration : 1 },
                    { startDate : '2022-03-23', duration : 1 },
                    { startDate : '2022-03-25', duration : 1 }
                ]
            },
            {
                id        : 2,
                name      : 'DIY project',
                startDate : '2022-03-21',
                segments  : [
                    // segments can have their own names & colors
                    { name : 'Plan', startDate : '2022-03-21', duration : 1, eventColor : 'indigo' },
                    { name : 'Get supplies', startDate : '2022-03-23', duration : 2  }
                ]
            }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 },
            { id : 7, event : 2, resource : 2 }
        ]
    },
    features : {
        eventSegments : {
            // split at the exact date user clicks in UI
            roundedSplit : false
        }
    }
});

This feature is enabled by default

Configs

Common

disabledInstancePlugin

listenersEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Other

allowResizeToZeroEventResize

bottomHandleEventResize

catchEventHandlerExceptionsEvents

dragThresholdEventResize

dragTouchStartDelayEventResize

dynamicHandleSizeEventResize

leftHandleEventResize

lockLayoutEventResize

reservedSpaceEventResize

resizeSelectedEventResize

rightHandleEventResize

showExactResizePositionEventResize

showTooltipEventResize

tipEventResize

tooltipTemplateEventResize

topHandleEventResize

validatorFnEventResize

validatorFnThisObjEventResize

Properties

Common

disabledInstancePlugin

Class hierarchy

isEventSegmentResize: Boolean= truereadonly

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

isEventSegmentResize: Boolean= truereadonlystatic

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

isEventResizeEventResize

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

isResizingEventResize

tipEventResize

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

beforeEventSegmentResize

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

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

});

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

beforeEventSegmentResizeFinalize

Fired on the owning Scheduler Pro to allow implementer to prevent immediate finalization by setting data.context.async = true in the listener, to show a confirmation popup etc

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

// Adding a listener using the "on" method
eventSegmentResize.on('beforeEventSegmentResizeFinalize', ({ source, context, context.async, context.finalize }) => {

});

Parameter	Type	Description
`source`	SchedulerPro	Scheduler Pro instance
`context`	Object
`context.async`	Boolean	Set true to handle resize asynchronously (e.g. to wait for user confirmation)
`context.finalize`	function	Call this method to finalize resize. This method accepts one argument: pass `true` to update records, or `false`, to ignore changes

eventSegmentPartialResize

Fires on the owning Scheduler Pro on each segment resize move event

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

});

Parameter	Type	Description
`source`	SchedulerPro	Scheduler Pro instance
`eventRecord`	EventModel	Segment being resized
`startDate`	Date
`endDate`	Date
`element`	HTMLElement

eventSegmentResizeEnd

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

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

});

Parameter	Type	Description
`source`	SchedulerPro	Scheduler Pro instance
`changed`	Boolean	Shows if the record has been changed by the resize action
`eventRecord`	EventModel	Segment being resized

eventSegmentResizeStart

Fires on the owning Scheduler Pro when segment resizing starts

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

});

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

beforeDestroyEvents

beforeEventResizeEventResize

beforeEventResizeFinalizeEventResize

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

eventPartialResizeEventResize

eventResizeEndEventResize

eventResizeStartEventResize

Event handlers

onBeforeEventSegmentResize

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

new EventSegmentResize({
    onBeforeEventSegmentResize({ source, eventRecord, resourceRecord, event }) {

    }
});

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

onBeforeEventSegmentResizeFinalize

Called on the owning Scheduler Pro to allow implementer to prevent immediate finalization by setting data.context.async = true in the listener, to show a confirmation popup etc

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

new EventSegmentResize({
    onBeforeEventSegmentResizeFinalize({ source, context }) {

    }
});

Parameter	Type	Description
`source`	SchedulerPro	Scheduler Pro instance
`context`	Object
`context.async`	Boolean	Set true to handle resize asynchronously (e.g. to wait for user confirmation)
`context.finalize`	function	Call this method to finalize resize. This method accepts one argument: pass `true` to update records, or `false`, to ignore changes

onEventSegmentPartialResize

Called on the owning Scheduler Pro on each segment resize move event

new EventSegmentResize({
    onEventSegmentPartialResize({ source, eventRecord, startDate, endDate, element }) {

    }
});

Parameter	Type	Description
`source`	SchedulerPro	Scheduler Pro instance
`eventRecord`	EventModel	Segment being resized
`startDate`	Date
`endDate`	Date
`element`	HTMLElement

onEventSegmentResizeEnd

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

new EventSegmentResize({
    onEventSegmentResizeEnd({ source, changed, eventRecord }) {

    }
});

Parameter	Type	Description
`source`	SchedulerPro	Scheduler Pro instance
`changed`	Boolean	Shows if the record has been changed by the resize action
`eventRecord`	EventModel	Segment being resized

onEventSegmentResizeStart

Called on the owning Scheduler Pro when segment resizing starts

new EventSegmentResize({
    onEventSegmentResizeStart({ source, eventRecord, resourceRecord, event }) {

    }
});

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