TimeSelection
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.
//<code-header>
fiddle.title = 'Time selection';
//</code-header>
const scheduler = new Scheduler({
appendTo : targetElement,
// makes scheduler as high as it needs to be to fit rows
autoHeight : true,
features : {
timeSelection : {
headerRenderer({ timeRange }) {
return `<span class="b-selection-start">${DateHelper.format(timeRange.startDate, 'LST')}</span>
<span class="b-selection-end">${DateHelper.format(timeRange.endDate, 'LST')}</span>
<i class='fa fa-close' data-ref="closeButton" data-btip="Close"></i>`;
}
}
},
viewPreset : 'hourAndDay',
startDate : new Date(2022, 4, 8, 8),
endDate : new Date(2022, 4, 8, 16),
columns : [
{ field : 'name', text : 'Name', width : 100 }
],
resources : [
{ id : 1, name : 'Bernard' },
{ id : 2, name : 'Bianca' },
{ id : 3, name : 'Rolf' },
{ id : 4, name : 'Bengt' },
{ id : 5, name : 'Penny' }
],
events : [
{ id : 1, resourceId : 1, name : 'Interview', startDate : '2022-05-08T09:00:00', endDate : '2022-05-08T10:00:00' },
{ id : 2, resourceId : 2, name : 'Meeting', startDate : '2022-05-08T13:00:00', endDate : '2022-05-08T15:00:00' },
{ id : 3, resourceId : 3, name : 'Future task', startDate : '2022-05-08T09:00:00', endDate : '2022-05-08T11:30:00' }
],
bbar : [
{
ref : 'selectionLabel',
type : 'widget'
}
],
getAvailableResources(startDate, endDate) {
return this.resourceStore.query(resource => this.isDateRangeAvailable(startDate, endDate, null, resource));
},
onTimeSelectionChange({ startDate, endDate }) {
const availableResources = startDate ? this.getAvailableResources(startDate, endDate).length : this.resourceStore.count;
this.widgetMap.selectionLabel.html = `${availableResources} resources available`;
}
});
scheduler.features.timeSelection.selectedTimeSpan = {
startDate : new Date(2022, 4, 8, 10),
endDate : new Date(2022, 4, 8, 13)
};Configuration
You can configure the content of the header element using the headerRenderer function.
This feature is disabled by default. For info on enabling it, see GridFeatures.
Configs
18
Configs
18Common
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>
`;
}
}
}
});
| Parameter | Type | Description |
|---|---|---|
data | Object | Render data |
data.timeRange | Object | |
data.timeRange.startDate | Date | |
data.timeRange.endDate | Date |
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)`;
}
}
}
});
| Parameter | Type | Description |
|---|---|---|
data | Object | Tooltip data |
data.startDate | Date | |
data.endDate | Date |
String representing the HTML markup
Other
Specify true to enable a drag-drop gesture to select the time span.
The selected time span, which can be set using simple startDate and endDate properties
| Parameter | Type | Description |
|---|---|---|
selectedTimeSpan.startDate | Date | The start date of the selected time span |
selectedTimeSpan.endDate | Date | The end date of the selected time span |
Misc
Properties
21
Properties
21Class hierarchy
Other
Specify true to enable a drag-drop gesture to select the time span.
The selected time span, which can be set using simple startDate and endDate properties
| Parameter | Type | Description |
|---|---|---|
selectedTimeSpan.startDate | Date | The start date of the selected time span |
selectedTimeSpan.endDate | Date | The end date of the selected time span |
Functions
31
Functions
31Configuration
Events
Misc
Other
Events
10
Events
10Triggered when time selection changes
// Adding a listener using the "on" method
timeSelection.on('timeSelectionChange', ({ source, startDate, endDate }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | The scheduler |
startDate | Date | The selected range start date, or |
endDate | Date | The selected range end date, or |
Triggered when clicking the time selection header element
// Adding a listener using the "on" method
timeSelection.on('timeSelectionElementClick', ({ source, startDate, endDate, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | The scheduler |
startDate | Date | The selected range start date |
endDate | Date | The selected range end date |
domEvent | Event | The raw DOM event |
Event handlers
10
Event handlers
10Called when time selection changes
new TimeSelection({
onTimeSelectionChange({ source, startDate, endDate }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | The scheduler |
startDate | Date | The selected range start date, or |
endDate | Date | The selected range end date, or |
Called when clicking the time selection header element
new TimeSelection({
onTimeSelectionElementClick({ source, startDate, endDate, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | The scheduler |
startDate | Date | The selected range start date |
endDate | Date | The selected range end date |
domEvent | Event | The raw DOM event |
Typedefs
2
Typedefs
2CSS variables
3
CSS variables
3| Name | Description |
|---|---|
--b-time-selection-opacity | Time selection body opacity |
--b-time-selection-header-background | Time selection header background |
--b-time-selection-background | Time selection body background color |