ColumnLines
Feature

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

Configs

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

renderer : Function/String

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;
                }
            }
        }
    }
});

Parameters

date : Date

The line date
lineConfig : DomConfig

The line DOM config object which you can mutate

Returns

void

Properties

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

isColumnLines : Booleantrue

READONLY

static

ADVANCED

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

isColumnLines : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

refresh( )

private

Draw column lines that are in view
render( )

private

Draw lines when scheduler/gantt is rendered.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-column-lines-major-color	Column lines major tick color
--b-column-lines-major-style	Column lines major tick style (border-style)
--b-column-lines-resource-color	Column lines resource line color (used in vertical mode)
--b-column-lines-tick-color	Column lines tick color
--b-column-lines-tick-style	Column lines tick style (border-style)
--b-column-lines-zindex	Column lines z-index

id: columnLines

Source path

Scheduler/feature/ColumnLines.js

Demo

examples/basic

ColumnLines
Feature

See also

Configs

Parameters

Returns

Properties

Functions

CSS variables

Source path

Demo

Inheritance tree3

Mixins3

Contents

ColumnLines Feature

See also

Configs

Parameters

Returns

Properties

Functions

CSS variables

Source path

Demo

Inheritance tree3

Mixins3

Contents

ColumnLines
Feature