TimeSpanHighlight
This feature exposes methods on the owning Scheduler or Gantt widget which you can use to highlight one or multiple time spans in the schedule. Please see highlightTimeSpan and highlightTimeSpans to learn more or try the demo below:
//<code-header>
fiddle.title = 'Time span highlight';
//</code-header>
const schedulerPro = new SchedulerPro({
appendTo : targetElement,
// makes scheduler as high as it needs to be to fit rows
autoHeight : true,
snap : true,
startDate : new Date(2022, 4, 15, 10),
endDate : new Date(2022, 4, 15, 17),
viewPreset : 'hourAndDay',
forceFit : true,
columns : [
{ field : 'name', text : 'Hairdressers', width : 100 },
{
type : 'widget',
width : 120,
text : 'Availability',
align : 'center',
widgets : [{
type : 'button',
text : 'Show',
onClick : ({ source }) => {
let availability;
const resourceRecord = source.cellInfo.record;
switch (resourceRecord.name) {
case 'Benjamin':
availability = [
{
resourceRecord,
name : 'Available ($40/h)',
startDate : new Date(2022, 4, 15, 10),
endDate : new Date(2022, 4, 15, 13)
}
];
break;
case 'Bianca':
availability = [
{
resourceRecord,
name : 'Available ($60/h)',
startDate : new Date(2022, 4, 15, 11),
endDate : new Date(2022, 4, 15, 13)
},
{
resourceRecord,
name : 'Available ($50/h)',
startDate : new Date(2022, 4, 15, 14),
endDate : new Date(2022, 4, 15, 16)
}
];
break;
case 'Sebastian':
availability = [
{
resourceRecord,
name : 'Available ($110/h)',
startDate : new Date(2022, 4, 15, 10),
endDate : new Date(2022, 4, 15, 12)
},
{
resourceRecord,
name : 'Available ($150/h)',
startDate : new Date(2022, 4, 15, 14),
endDate : new Date(2022, 4, 15, 16)
}
];
break;
case 'Emilio':
availability = [
{
resourceRecord,
name : 'Available (80/h)',
startDate : new Date(2022, 4, 15, 10),
endDate : new Date(2022, 4, 15, 14)
}
];
break;
}
schedulerPro.highlightTimeSpans(availability);
}
}]
}
],
features : {
eventDrag : {
snapToResource : true
},
scheduleTooltip : false,
timeSpanHighlight : true
},
tbar : [
{
text : 'Clear highlight',
onAction() {
schedulerPro.unhighlightTimeSpans();
}
}
],
project : {
resources : [
{ id : 1, name : 'Benjamin' },
{ id : 2, name : 'Bianca' },
{ id : 3, name : 'Sebastian' },
{ id : 4, name : 'Emilio' }
],
events : [
{
id : 1,
name : 'Crew cut',
startDate : '2022-05-15T14:00:00',
duration : 1.5,
durationUnit : 'h',
iconCls : 'b-icon fa-cut'
},
{
id : 2,
name : 'Dye hair',
startDate : '2022-05-15T12:00:00',
duration : 2,
durationUnit : 'h',
iconCls : 'b-icon fa-female'
}
],
assignments : [
{
id : 1,
event : 1,
resource : 1
},
{
id : 2,
event : 2,
resource : 3
}
]
}
});
schedulerPro.highlightTimeSpan({
startDate : new Date(2022, 4, 15, 11),
endDate : new Date(2022, 4, 15, 16),
surround : true,
name : 'Away'
});Example usage with Scheduler Pro
const scheduler = new SchedulerPro({
features : {
timeSpanHighlight : true
}
})
scheduler.highlightTimeSpan({
startDate : new Date(2022, 4, 1),
endDate : new Date(2022, 4, 5),
name : 'Time off'
});
Example usage with Gantt
const gantt = new Gantt({
features : {
timeSpanHighlight : true
}
})
gantt.highlightTimeSpan({
startDate : new Date(2022, 4, 1),
endDate : new Date(2022, 4, 5),
padding : 10, // Some "air" around the rectangle
taskRecord, // You can also highlight an area specific to a Gantt task
name : 'Time off'
});
This feature is disabled by default.
Configs
9
Configs
9Misc
Other
Properties
15
Properties
15Common
Class hierarchy
Other
Functions
31
Functions
31Other
Highlights the region representing the passed time span and optionally for a single certain resource.
| Parameter | Type | Description |
|---|---|---|
options | HighlightTimeSpan | A single options object describing the time span to highlight. |
Highlights the regions representing the passed time spans.
| Parameter | Type | Description |
|---|---|---|
timeSpans | HighlightTimeSpan[] | An array of objects with start/end dates describing the rectangle to highlight. |
options | Object | A single options object |
options.clearExisting | Boolean | Set to |
Removes any highlighting elements.
| Parameter | Type | Description |
|---|---|---|
fadeOut | Boolean |
|
Configuration
Events
Misc
Events
5
Events
5Event handlers
5
Event handlers
5Typedefs
2
Typedefs
2An object describing the time span region to highlight.
| Parameter | Type | Description |
|---|---|---|
startDate | Date | A start date constraining the region |
endDate | Date | An end date constraining the region |
name | String | A name to show in the highlight element (this is automatically encoded) |
resourceRecord | ResourceModel | The resource record (applicable for Scheduler only) |
taskRecord | Model | The task record (applicable for Gantt only) |
cls | String | A CSS class to add to the highlight element |
clearExisting | Boolean |
|
animationId | String | An id to enable animation of highlight elements |
surround | Boolean | True to shade the time axis areas before and after the time span
(adds a |
padding | Number | Inflates the non-timeaxis sides of the region by this many pixels |
CSS variables
7
CSS variables
7| Name | Description |
|---|---|
--b-time-span-highlight-range-font-size | Time span highlight range font-size |
--b-time-span-highlight-range-opacity | Time span highlight range opacity |
--b-time-span-highlight-unavailable-background | Time span highlight unavailable background |
--b-time-span-highlight-unavailable-color | Time span highlight unavailable color |
--b-time-span-highlight-range-color | Time span highlight range color |
--b-time-span-highlight-range-background | Time span highlight range background |
--b-time-span-highlight-range-border-color | Time span highlight range border color |