TimelineEventRendering

Controls how much space to leave between stacked event bars in px.

Value will be constrained by half the row height in horizontal mode.

Event color used by default. Events and resources can specify their own color, with priority order being: Event -> Resource -> Scheduler default.

Specify null to use the current primary color, and allow easier control using custom CSS.

For available standard colors, see EventColor.

Event style used by default. Events and resources can specify their own style, with priority order being: Event -> Resource -> Scheduler default. Determines the appearance of the event by assigning a CSS class to it. Available styles are:

• 'tonal' (default) - flat pale look with text in darker shade of events color
• 'filled' flat look
• 'bordered' - has border in darker shade of events color
• 'traced' - has border in darker shade of events color with a pale fill
• 'outlined' - only border + text until hovered
• 'indented' - has colored text and wide left border in same color
• 'rounded' - minimalistic style with rounded corners
• 'line' - as a line with the text below it
• 'dashed' - as a dashed line with the text below it
• 'minimal' - as a thin line with small text above it
• 'gantt' - The default style used for Gantt task bars
• null - do not apply a default style and take control using custom CSS (easily overridden basic styling will be used).

In addition, there are two styles intended to be used when integrating with Bryntum Calendar. To match the look of Calendar events, you can use:

• 'calendar' - a variation of the "colored" style matching the default style used by Calendar
• 'interday' - a variation of the "plain" style, for interday events

Specify true to force rendered events/tasks to fill entire ticks. This only affects rendering, start and end dates retain their value on the data level.

When enabling fillTicks, drag-drop interactions use the same granularity as the bottom time axis "ticks". This means if you are viewing a day schedule, and you move an event starting 8am from Monday to Tuesday, it will still always start at 8am. Enabling snap might also improve the UX.

When true, events are sized and positioned based on rowHeight, resourceMargin and barMargin settings. Set this to false if you want to control height and vertical position using CSS instead.

Note that events always get an absolute top position, but when this setting is enabled that position will match row's top. To offset within the row using CSS, use translate : 0 y.

The width/height (depending on vertical / horizontal mode) of all the time columns.

There is a limit for the tick size value. Its minimal allowed value is calculated so ticks would fit the available space. Only applicable when forceFit is set to false. To set tickSize freely skipping that limitation please set suppressFit to true.

Fired when the tick size changes.

listeners : {
    tickSizeChange({ source, tickSize }) {
        ....
    },
}

Called when the tick size changes.

listeners : {
    tickSizeChange({ source, tickSize }) {
        ....
    },
}