ScheduleContext
Feature

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.

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.

Keyboard navigation and cell selection

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

Useful configs and functions

Member	Description
activateOnEvent	DOM event that activates the context
shareWithEvent	Share context with event elements
beforeContextShow	Fires before context popup is shown
beforeSelectedContextsShow	Fires before multi-selection popup shows

Configs

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

activateOnEvent : Booleanfalse

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.

Has a corresponding runtime activateOnEvent property.
keyNavigation : Booleanfalse

Enables keyboard navigation across ticks.
multiSelect : Booleanfalse

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.
Parameters
- 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 : Booleanfalse

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.

Has a corresponding runtime shareWithEvent property.
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.
widget : WidgetConfig

A widget config describing the widget to show in the context tick.

Has a corresponding runtime widget property.

Properties

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

isScheduleContext : Booleantrue

READONLY

static

ADVANCED

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

activateOnEvent : Booleanfalse

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.

Has a corresponding activateOnEvent config.
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 : HTMLElement

READONLY

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

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.

Has a corresponding shareWithEvent config.
timelineContext : TimelineContext

READONLY

The active context.
widget : Widget

READONLY
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.
- timelineContext : TimelineContext
  
  The timeline context for which the widget was activated.
Has a corresponding widget config.
isScheduleContext : Booleantrue

READONLY

ADVANCED

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

READONLY

ON-OWNER

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

ON-OWNER

Currently active timeline cell.

Functions

Functions are methods available for calling on the class

clear( )

Clears the current visible context element
hasEvent( context )
: Boolean

internal

Utility function to see if there is an event bar coinciding with the passed timeline context
selectCellRange( fromCell, toCell )

Extends selection from one cell to another.
startTimelineCellsNavigation( )

ON-OWNER

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

ON-OWNER

Stops navigating the TimeAxis column cells

Events

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

beforeContextShow

PREVENTABLE

ON-OWNER

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.

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

PREVENTABLE

ON-OWNER

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.

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

onBeforeContextShow

PREVENTABLE

ON-OWNER

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.

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

PREVENTABLE

ON-OWNER

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.

Note that this handler is called on the owning widget:

id: scheduleContext

Source path

Scheduler/feature/ScheduleContext.js

Demo

examples/schedule-context

ScheduleContext
Feature

Multiple cell selection

Keyboard navigation and cell selection

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Demo

Inheritance tree3

Mixins2

Contents

ScheduleContext Feature

Multiple cell selection

Keyboard navigation and cell selection

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Demo

Inheritance tree3

Mixins2

Contents

ScheduleContext
Feature