TimeSelection
Feature

Feature that allows selection of a time span in the time axis header. When a time span is selected in the header, a timeSelectionChange event is fired.

Configuration

You can configure the content of the header element using the headerRenderer function.

Not compatible with the HeaderZoom feature.

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

Useful configs and functions

Member	Description
tooltipTemplate	Template for the selection tooltip
headerRenderer	Custom renderer for the header highlight
selectedTimeSpan	Currently selected time span
timeSelectionChange	Fires when time selection changes

Configs

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

headerRenderer : Function
Function used to generate the HTML content for the selected time span's header element.

If you want to include an icon or similar to clear the selection on click, make sure to set date-ref="closeButton" on it.
```
const scheduler = new Scheduler({
    features : {
        timeSelection : {
            headerRenderer({ timeRange }) {
                return `
                    ${DateHelper.format(timeRange.startDate, 'LL')}
                    <div class="close" data-ref="closeButton></div>
                `;
            }
        }
    }
});
```
Parameters
- data : Object
  
  Render data
- timeRange : Object
  Time range
- startDate : Date
  Start date
- endDate : Date
  End date
Returns

String

tooltipTemplate : Function

Template used to generate the tooltip contents when hovering the time selection header element.

const scheduler = new Scheduler({
  features : {
    timeSelection : {
      tooltipTemplate({ startDate, endDate }) {
          const count = this.client.getAvailableResources(startDate, endDate).length;
          return `${count || 'No'} available resource(s)`;
      }
    }
  }
});

Parameters

data : Object

Tooltip data
startDate : Date
Start date
endDate : Date
End date

Returns

String

String representing the HTML markup

enableDragSelect : Booleanfalse

Specify true to enable a drag-drop gesture to select the time span.

Has a corresponding runtime enableDragSelect property.
selectedTimeSpan : Object
The selected time span, which can be set using simple startDate and endDate properties
- startDate : Date
  
  The start date of the selected time span
- endDate : Date
  
  The end date of the selected time span
Has a corresponding runtime selectedTimeSpan property.

Properties

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

isTimeSelection : Booleantrue

READONLY

static

ADVANCED

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

enableDragSelect : Booleanfalse

Specify true to enable a drag-drop gesture to select the time span.

Has a corresponding enableDragSelect config.
selectedTimeSpan : Object
The selected time span, which can be set using simple startDate and endDate properties
- startDate : Date
  
  The start date of the selected time span
- endDate : Date
  
  The end date of the selected time span
Has a corresponding selectedTimeSpan config.
isTimeSelection : Booleantrue

READONLY

ADVANCED

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

Events

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

timeSelectionChange

ON-OWNER

Triggered when time selection changes

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

ON-OWNER

Triggered when clicking the time selection header element

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

onTimeSelectionChange

ON-OWNER

Called when time selection changes

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

ON-OWNER

Called when clicking the time selection header element

Note that this handler is called on the owning widget:

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-time-selection-background	Time selection body background color
--b-time-selection-header-background	Time selection header background
--b-time-selection-opacity	Time selection body opacity

id: timeSelection

Source path

Scheduler/feature/TimeSelection.js

Demo

examples/time-selection

TimeSelection
Feature

Configuration

Useful configs and functions

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree4

Mixins3

Contents

TimeSelection Feature

Configuration

Useful configs and functions

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree4

Mixins3

Contents

TimeSelection
Feature