EventSegments

This feature provides segmented events support. It implements rendering of such events and also adds a entries to the event context menu allowing to split the selected event and rename segments.

Note: this feature is not compatible with Revisions feature.

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. For info on enabling it, see GridFeatures.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

maxSplitDuration: Duration | DurationConfig | Number

Maximum allowed split duration. The value is used when calculating split duration automatically.

Setting the config to zero means not limiting split duration max value.

The duration can be provided as Duration instance (or its configuration object) including both numeric and unit parts.

...
features : {
    eventSegments : {
        // split duration is automatic and changes depending on zoom level
        // but we limit its maximum as 1 week
        maxSplitDuration : {
            magnitude : 1,
            unit      : "week"
        }
    }
...

Or it can be provided as a positive number which means it's expressed in the clicked event duration units.

Defaults to 1 day.

minSplitDuration: Duration | DurationConfig | Number= 0

Minimum allowed split duration. The value is used when calculating split duration automatically.

Setting the config to zero (default) means not limiting split duration min value.

The duration can be provided as Duration instance (or its configuration object) including both numeric and unit parts.

...
features : {
    eventSegments : {
        // split duration is automatic and changes depending on zoom level
        // limit its minimum as 1 hour
        minSplitDuration : {
            magnitude : 1,
            unit      : "hour"
        }
        // we limit its maximum as 1 day
        maxSplitDuration : {
            magnitude : 1,
            unit      : "day"
        }
    }
...

Or it can be provided as a positive number which means it's expressed in the clicked event duration units.

roundedSplit: Boolean= trueAlso a property

If true, it uses rounded dates when splitting

splitDuration: Duration | DurationConfig | Number= 0

The split duration to be used when "Split event" menu item is called. When set to zero (default) the duration is calculated automatically as the clicked tick duration restricted by minSplitDuration and maxSplitDuration values.

The duration can be provided as Duration instance (or its configuration object) including both numeric and unit parts.

...
features : {
    eventSegments : {
        // split events by 1 day
        splitDuration : {
            magnitude : 1,
            unit      : "day"
        }
    }
...

Or it can be provided as a positive number which means it's expressed in the clicked event duration units.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isEventSegments: Boolean= truereadonly

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

isEventSegments: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

roundedSplit: Boolean= trueAlso a config

If true, it uses rounded dates when splitting

catchEventHandlerExceptionsEvents

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Functions

Other

getSplitDate

Returns a date at which to split an event.

Returns start date of the tick being clicked if the tick duration is less than maxSplitDuration or maxSplitDuration is zero. When the tick duration is greater than maxSplitDuration returns context.date rounded based on active time axis resolution unit.

Override this method if you want to implement another way of calculating the split date.

Parameter	Type	Description
`context`	Object	Split function-call context
`context.eventRecord`	EventModel	Event being split
`context.point`	Array	Click position. Array containing [x, y] coordinates of mouse click.
`context.date`	Date	Date corresponding to the click position.
`context.tick`	Object	Time axis tick corresponding to the click position.
`context.timeAxis`	TimeAxis	Time axis instance.

Returns: Date -

Returns a date to be used to split.

getSplitDuration

Returns the event split duration.

If splitDuration value is provided:

as a Numberthe method returns the value as is
as an Object or Duration instance - the method returns the value unit part

If splitDuration is NOT provided the method returns the clicked tick duration constrained by minSplitDuration and maxSplitDuration values.

Override this method if you want to implement another way of the split duration calculating.

Parameter	Type	Description
`context`	Object	Split call context
`context.eventRecord`	EventModel	Event being split
`context.point`	Array	Click position. Array containing [x, y] coordinates of mouse click.
`context.date`	Date	Date corresponding to the click position.
`context.tick`	Object	Time axis tick corresponding to the click position.
`context.timeAxis`	TimeAxis	Time axis instance.

Returns: Number -

Returns split duration.

getSplitDurationUnit

Returns the duration unit to be used for the event splitting.

When splitDuration is provided as Duration instance or its configuration Object:

...
features : {
    eventSegments : {
        // split events by 1 day
        splitDuration : {
            magnitude : 1,
            unit      : "day"
        }
    }
    ...
}

the method returns the value unit part otherwise it returns the event durationUnit.

Override this method config-if you want to implement another way of the split duration unit defining.

See also: getSplitDate, getSplitDuration.

Parameter	Type	Description
`context`	Object	Split function-call context
`context.eventRecord`	EventModel	Event being split
`context.point`	Array	Click position. Array containing [x, y] coordinates of mouse click.
`context.date`	Date	Date corresponding to the click position.
`context.tick`	Object	Time axis tick corresponding to the click position.
`context.timeAxis`	TimeAxis	Time axis instance.

Returns: String -

Returns split duration unit.

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Events

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

CSS variables

Name	Description
`--b-segment-link-width`	Event segment link width
`--b-segment-link-style`	Event segment link style
`--b-segment-link-color`	Event segment link color
`--b-segmented-background`	Event segment background

EventSegments

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Other

Lifecycle

Misc

Functions

Other

Configuration

Events

Lifecycle

Misc

Events

Event handlers

Typedefs

CSS variables