Split

This feature allows splitting the Scheduler into multiple views, either by using the cell context menu, or programmatically by calling split().

Split

//<code-header>
fiddle.title = 'Split';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    height : '30em',

    startDate : new Date(2023, 4, 22),
    endDate   : new Date(2023, 5, 30),

    features : {
        split : true
    },

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

    resources : ArrayHelper.populate(50, i => ({ id : i, name : `Resource ${i}` }), true),

    events : ArrayHelper.populate(200, i => ({ id : i, name : `Event ${i}`, resourceId : i % 50, startDate : new Date(2023, 4, 22, i * 12), duration : 4 }), true)
});

scheduler.split({ direction : 'vertical' });

See Split for more details.

Scheduler specifics

Scheduler allows splitting by dates, either programmatically or by using the context menu.
Scheduler prevents splitting in the grid part using the context menu.
The eventDrag feature will automatically be configured to allow dragging between the clones (by setting constrainDragToTimeline to false).
Splitting is not supported in vertical mode.

Note that although Gantt is related to Scheduler, splitting is not supported in Gantt.

This feature is disabled by default. For info on enabling it, see GridFeatures.

Please note that this feature will not work with the LockRows feature.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

relayProperties: Object<String, Boolean>

Properties whose changes should be relayed to sub-views at runtime.

Supply an object with property names as keys, and a truthy value to relay the change, or a falsy value to not relay it. The object will be merged with the default values.

In addition to the properties relayed by Grid, Scheduler also relays these:

Example of supplying a custom set of properties to relay:

const scheduler = new Scheduler({
    features : {
        split : {
            relayProperties : {
                barMargin : false, // Do not relay barMargin changes
                myConfig : true   // Relay changes to the myConfig property
            }
        }
    }
}

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

subViewsSplit

Class hierarchy

isSplit: Boolean= truereadonly

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

isSplit: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

Common

unsplitSplit

Other

split

Split the scheduler into two or four parts.

Splits into two when passed direction : 'vertical', direction : 'horizontal' or atColumn, atRecord or atDate.
Splits into four when passed direction : 'both' or atColumn/atDate and atRecord.

// Split horizontally (at the row in the center of the scheduler)
await scheduler.split({ direction : 'horizontal' });

// Split both ways by a specific date and resource
await schedule.split({
   atRecord : scheduler.resourceStore.getById(10),
   atDate   : new Date(2023, 5, 8)
});

To return to a single scheduler, call unsplit.

Note that this function is callable directly on the scheduler instance.

Parameter	Type	Description
`options`	Object	Split options
`options.direction`	vertical \| horizontal \| both	Split direction, 'vertical', 'horizontal' or 'both'. Not needed when passing `atColumn` or `atRecord`.
`options.atDate`	Date	Date to split at. Has to be within the time axis
`options.atColumn`	Column	Column to split at
`options.atRecord`	Model	Record to split at

Returns: Promise -

Resolves when split is complete, and subviews are scrolled to the correct position.

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

split

Fired when splitting the Scheduler.

// Adding a listener using the "on" method
split.on('split', ({ subViews, options, options.direction, options.atColumn, options.atRecord, options.atDate }) => {

});

Parameter	Type	Description
`subViews`	SchedulerBase[]	The sub views created by the split
`options`	Object	The options passed to the split call
`options.direction`	horizontal \| vertical \| both	The direction of the split
`options.atColumn`	Column	The column to split at
`options.atRecord`	Model	The record to split at
`options.atDate`	Date	The date to split at

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

unsplitSplit

Event handlers

onSplit

Called when splitting the Scheduler.

new Split({
    onSplit({ subViews, options }) {

    }
});

Parameter	Type	Description
`subViews`	SchedulerBase[]	The sub views created by the split
`options`	Object	The options passed to the split call
`options.direction`	horizontal \| vertical \| both	The direction of the split
`options.atColumn`	Column	The column to split at
`options.atRecord`	Model	The record to split at
`options.atDate`	Date	The date to split at