ScheduleContext

Allow visually selecting a schedule "cell" by clicking, or any other pointer gesture.

This feature is disabled by default

const scheduler = new Scheduler({
    features : {
        // Configure as a truthy value to enable the feature
        scheduleContext : {
            triggerEvent : 'hover',
            renderer     : (context, element) => {
                element.innerText = '😎';
            }
        }
    }
});

The contextual details are available in the context property.

Note that the context is cleared upon change of viewPreset such as when zooming in or out.

Schedule context

//<code-header>
fiddle.title = 'Schedule context';
//</code-header>
targetElement.innerHTML = '<p>Hover cells to highlight the context:</p>';

const scheduler = new Scheduler({
    appendTo : targetElement,

    features : {
        scheduleContext : {
            triggerEvent : 'mouseover',
            widget       : {
                type    : 'button',
                cls     : 'context-button',
                icon    : 'fa fa-plus',
                tooltip : 'Add event',
                style   : 'border-radius: 0',
                onClick() {
                    const { timelineContext } = this.owner;

                    scheduler.eventStore.add({
                        name         : 'Created from schedule context widget click',
                        startDate    : timelineContext.tickStartDate,
                        duration     : 1,
                        durationunit : 'd',
                        resourceId   : timelineContext.resourceRecord.id
                    });
                }
            }
        }
    },

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

    startDate : new Date(2021, 1, 6),
    endDate   : new Date(2021, 1, 13),

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

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Hover outside me', startDate : '2021-02-07', endDate : '2021-02-10', iconCls : 'fa fa-mouse-pointer' }
    ]
});

Multiple cell selection

The feature allows selecting multiple schedule cells (can be toggled with the multiSelect config). The selected cells are stored in the selectedCells collection. Selecting multiple cells can be done using the mouse by clicking while pressing the [Shift] key or using the keyboard (see next chapter for shortcuts). Also selection can be done programmatically by calling the selectCellRange method.

The feature also implements keyboard navigation across cells (can be toggled with keyNavigation config) and keyboard cell selection (can be toggled with multiSelect config).

When enabled it uses following default keyboard shortcuts:

Keys	Action
`ArrowUp`	Focuses the cell above currently focused cell.
`ArrowRight`	Focuses the cell to the right of currently focused cell
`ArrowDown`	Focuses the cell below currently focused cell
`ArrowLeft`	Focuses the cell to the left of currently focused cell
`Shift`+`ArrowUp`	Extends the selection one row up from currently focused cell
`Shift`+`ArrowRight`	Extends the selection one column to the right from currently focused cell
`Shift`+`ArrowDown`	Extends the selection one row down from currently focused cell
`Shift`+`ArrowLeft`	Extends the selection one column to the left from currently focused cell
`Escape	Clears cells selection

Configs

Common

disabledInstancePlugin

listenersEvents

Other

activateOnEvent: Boolean= falseAlso a property

By default, the ScheduleContext feature hides its widget or element when the pointer is over event/task bar.

Set this property to true to activate when over an event/task bar.

keyNavigation: Boolean= false

Enables keyboard navigation across ticks.

multiSelect: Boolean= false

Enables multiple cell selection. Selected cells are stored in selectedCells collection.

renderer: String | function

A function (or the name of a function) which may mutate the contents of the context overlay element which tracks the active resource/tick context. Use this when simple, decorative or informational HTML is required.

When multiSelect is enabled the function is called for each of the selected cells and then its second argument receives a DOM configuration object of the cell. In contrast when multiSelect is false (default) the second argument provides a DOM element.

Use the widget option to show a widget with interaction in a tick cell.

Parameter	Type	Description
`context`	TimelineContext	The context being highlighted.
`element`	HTMLElement \| DomConfig	The context highlight element or DOM configuration object of the element when multiSelect is enabled.

Returns: void

selectedCells: Collection

Collection of selected cells.

shareWithEvent: Boolean= falseAlso a property

By default, the ScheduleContext feature hides its widget or element when the pointer is over a tick in which an event/task bar exists.

Set this property to true to activate when an event/task bar also exists in the context tick.

startNavigationOnColumnFocus: Boolean

true to automatically enable tick cells navigation when focusing the timeaxis column

triggerEvent: click | hover | contextmenu | mousedown= click

The pointer event type to use to update the context. May be 'hover' to highlight the tick context when moving the mouse across the timeline.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isScheduleContext: Boolean= truereadonly

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

isScheduleContext: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

activateOnEvent: Boolean= falseAlso a config

By default, the ScheduleContext feature hides its widget or element when the pointer is over event/task bar.

Set this property to true to activate when over an event/task bar.

context: TimelineContext

The contextual information about which cell was clicked on and highlighted.

When the viewPreset is changed (such as when zooming) the context is cleared and the highlight is removed.

element: HTMLElementreadonly

The element which is used to highlight the context if a renderer is being used. This is created lazily, and is not created if a widget is configured.

shareWithEvent: Boolean= falseAlso a config

By default, the ScheduleContext feature hides its widget or element when the pointer is over a tick in which an event/task bar exists.

Set this property to true to activate when an event/task bar also exists in the context tick.

timelineContext: TimelineContextreadonly

The active context.

widget: WidgetreadonlyAlso a config

The widget shown in timeline ticks. The widget will be sized and positioned to fit the tick.

Before being shown, it will be primed with a property called timelineContext which is a TimelineContext which describes exactly which tick is active.

The widget's owner will be the Scheduler.

The owner's timelineContext will also reference the current context.

Parameter	Type	Description
`timelineContext`	TimelineContext	The timeline context for which the widget was activated.

catchEventHandlerExceptionsEvents

Timeline cell navigation

isNavigatingTimelineCells: Boolean

Indicates whether navigating in the TimeAxis column is started and the timeaxis column is focused

timelineCell: TimelineContext

Currently active timeline cell.

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Functions

Other

clear

Clears the current visible context element

selectCellRange

Extends selection from one cell to another.

Parameter	Type	Description
`fromCell`	TimelineContext	Cell to start selection from. If nullish value is provided the method uses the last active cell.
`toCell`	TimelineContext	Cell to extend selection to

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Timeline cell navigation

startTimelineCellsNavigation

Starts navigating the TimeAxis column cells (if the timeaxis column is focused)

stopTimelineCellsNavigation

Stops navigating the TimeAxis column cells

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Events

beforeContextShow

This event is fired on the owning Scheduler when the context element or widget is about to be shown.

The position and size of the context element may be mutated by a handler.

If using a widget, the position object will be applied by the widget's setConfig method, so properties may be deleted or added or mutated to affect the widget in any way.

If using a renderer, the position object will be used to size and position the element which is used to highlight the context.

Returning false from a handler will prevent the context element from being shown.

// Adding a listener using the "on" method
scheduleContext.on('beforeContextShow', ({ source, context, element, position, position.width, position.height, position.x, position.y }) => {

});

Parameter	Type	Description
`source`	ScheduleContext	The ScheduleContext feature instance
`context`	TimelineContext	The context object containing information about the clicked cell
`element`	HTMLElement	The context highlight element
`position`	Object	The position and size of the context element. May be mutated by a handler.
`position.width`	Number	The width of the context element
`position.height`	Number	The height of the context element
`position.x`	Number	The x coordinate of the context element
`position.y`	Number	The y coordinate of the context element

beforeSelectedContextsShow

This event is fired on the owning Scheduler before the selected contexts are rendered. The event is triggered only when multiSelect is enabled

The position and size of the context element may be mutated by a handler.

If using a widget, the position object will be applied by the widget's setConfig method, so properties may be deleted or added or mutated to affect the widget in any way.

If using a renderer, the position object will be used to size and position the element which is used to highlight the context.

Returning false from a handler will prevent the context element from being shown.

// Adding a listener using the "on" method
scheduleContext.on('beforeSelectedContextsShow', ({ source, selectedContexts, domConfig }) => {

});

Parameter	Type	Description
`source`	ScheduleContext	The ScheduleContext feature instance
`selectedContexts`	TimelineContext[]	The context objects containing information about the selected cells
`domConfig`	DomConfig	A DomConfig config object which is used to render the selected cell elements.

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeContextShow

This event is called on the owning Scheduler when the context element or widget is about to be shown.

The position and size of the context element may be mutated by a handler.

If using a widget, the position object will be applied by the widget's setConfig method, so properties may be deleted or added or mutated to affect the widget in any way.

If using a renderer, the position object will be used to size and position the element which is used to highlight the context.

Returning false from a handler will prevent the context element from being shown.

new ScheduleContext({
    onBeforeContextShow({ source, context, element, position }) {

    }
});

Parameter	Type	Description
`source`	ScheduleContext	The ScheduleContext feature instance
`context`	TimelineContext	The context object containing information about the clicked cell
`element`	HTMLElement	The context highlight element
`position`	Object	The position and size of the context element. May be mutated by a handler.
`position.width`	Number	The width of the context element
`position.height`	Number	The height of the context element
`position.x`	Number	The x coordinate of the context element
`position.y`	Number	The y coordinate of the context element

onBeforeSelectedContextsShow

This event is called on the owning Scheduler before the selected contexts are rendered. The event is called only when multiSelect is enabled

The position and size of the context element may be mutated by a handler.

If using a widget, the position object will be applied by the widget's setConfig method, so properties may be deleted or added or mutated to affect the widget in any way.

If using a renderer, the position object will be used to size and position the element which is used to highlight the context.

Returning false from a handler will prevent the context element from being shown.

new ScheduleContext({
    onBeforeSelectedContextsShow({ source, selectedContexts, domConfig }) {

    }
});

Parameter	Type	Description
`source`	ScheduleContext	The ScheduleContext feature instance
`selectedContexts`	TimelineContext[]	The context objects containing information about the selected cells
`domConfig`	DomConfig	A DomConfig config object which is used to render the selected cell elements.

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

ScheduleContext

Multiple cell selection

Keyboard navigation and cell selection

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Other

Timeline cell navigation

Lifecycle

Misc

Functions

Other

Timeline cell navigation

Configuration

Events

Lifecycle

Misc

Events

Event handlers

Typedefs