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.
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.
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 |
See also
- ScheduleMenu - Schedule context menu
- ScheduleTooltip - Schedule tooltip
- TimeSelection - Time range selection
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Enables multiple cell selection. Selected cells are stored in selectedCells collection.
-
Collection of selected cells.
-
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. -
A widget config describing the widget to show in the context tick.
Has a corresponding runtime widget property.
-
Internal listeners, that cannot be removed by the user.
-
The widget which this plugin is to attach to.
Has a corresponding runtime client property.
-
Set to
falseto disable localization of this object.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Events class, or subclass thereof.
-
Identifies an object as an instance of Localizable class, or subclass thereof.
-
Identifies an object as an instance of ScheduleContext class, or subclass thereof.
-
A class property getter for the default values of internal properties for this class.
-
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.
-
The active context.
-
An empty array that can be used as a default value.
-
An empty object that can be used as a default value.
-
Identifies an object as an instance of InstancePlugin class, or subclass thereof.
-
Identifies an object as an instance of ScheduleContext class, or subclass thereof.
-
Returns a copy of the full configuration which was used to configure this object.
-
This property is set to
truebefore theconstructorreturns. -
This property is set to
trueon entry to the destroy method. It remains on the objects after returning fromdestroy(). If isDestroyed istrue, this property will also betrue, so there is no need to test for both (for example,comp.isDestroying || comp.isDestroyed). -
The Widget which was passed into the constructor, which is the Widget we are providing extra services for.
Has a corresponding client config.
-
Get the global LocaleHelper
-
Get the global LocaleManager
-
Currently active timeline cell.
Functions
Functions are methods available for calling on the class-
This optional class method is called when a class is mixed in using the mixin() method.
-
Registers this class type with its Factory
-
clear( )
Clears the current visible context element
-
Internal function used to hook destroy() calls when using thisObj
-
Internal function used restore hooked destroy() calls when using thisObj
-
Auto detaches listeners registered from start, if set as detachable
-
Internal function used to run a callback function after an event is triggered
-
Removes all listeners registered to this object by the application.
-
This will merge a feature's (subclass of InstancePlugin) keyMap with it's client's keyMap.