ColumnLines
Displays column lines for ticks, with a different styling for major ticks (by default they are darker). If this feature is disabled, no lines are shown. If it's enabled, line are shown for the tick level which is set in current ViewPreset. Please see columnLinesFor config for details.
The lines are drawn as divs, with only visible lines available in DOM. The color and style of the lines are
determined by the CSS rules for .b-column-line and .b-column-line-major.
For vertical mode, this features also draws vertical resource column lines if scheduler is configured with
columnLines : true (which is the default, see columnLines).
This feature is enabled by default
//<code-header>
fiddle.title = 'Column lines';
//</code-header>
targetElement.innerHTML = '<p>This demo has column lines, notice the darker line for the major tick:</p>';
const scheduler = new Scheduler({
appendTo : targetElement,
// makes scheduler as high as it needs to be to fit rows
autoHeight : true,
startDate : new Date(2018, 4, 6),
endDate : new Date(2018, 4, 20),
viewPreset : {
base : 'dayAndWeek',
timeColumnWidth : 30
},
columns : [
{ field : 'name', text : 'Name', width : 100 }
],
resources : [
{ id : 1, name : 'Bernard' },
{ id : 2, name : 'Bianca' }
],
events : [
{ id : 1, resourceId : 1, name : 'Interview', startDate : '2018-05-06', endDate : '2018-05-07' },
{ id : 2, resourceId : 1, name : 'Press meeting', startDate : '2018-05-08', endDate : '2018-05-09' },
{ id : 3, resourceId : 2, name : 'Audition', startDate : '2018-05-07', endDate : '2018-05-09' },
{ id : 4, resourceId : 2, name : 'Script deadline', startDate : '2018-05-11', endDate : '2018-05-11' }
]
});Configs
10
Configs
10Other
A renderer function, or name of a function in the ownership hierarchy, called for each line, letting you mutate the DOM element through the passed DomConfig object.
scheduler = new Scheduler({
width : 1000,
startDate : '2025-01-03',
endDate : '2025-01-09',
features : {
columnLines : {
renderer(date, domConfig) {
// Make Sunday line red
if (date.getDay() === 0) {
domConfig.style.borderColor = 'red';
domConfig.className.foo = 1;
}
}
}
}
});
| Parameter | Type | Description |
|---|---|---|
date | Date | The line date |
lineConfig | DomConfig | The line DOM config object which you can mutate |
Misc
Properties
16
Properties
16Common
Class hierarchy
Other
Functions
29
Functions
29Configuration
Events
Misc
Other
Events
5
Events
5Event handlers
5
Event handlers
5Typedefs
2
Typedefs
2CSS variables
6
CSS variables
6| Name | Description |
|---|---|
--b-column-lines-zindex | Column lines z-index |
--b-column-lines-tick-style | Column lines tick style (border-style) |
--b-column-lines-major-style | Column lines major tick style (border-style) |
--b-column-lines-tick-color | Column lines tick color |
--b-column-lines-major-color | Column lines major tick color |
--b-column-lines-resource-color | Column lines resource line color (used in vertical mode) |