TimelineEventRendering
Mixin

Functions to handle event rendering (EventModel -> dom elements). Provides base rendering configuration for event bars, including style, color, layout mode, and content generation.

Configs

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

committingCls : Stringb-sch-committing

private

The CSS class added to an event when it is currently committing changes
dirtyCls : Stringb-sch-dirty

private

The CSS class added to an event when it has unsaved modifications
endsOutsideViewCls : Stringb-sch-event-endsoutside

private

The CSS class added to an event/assignment when it ends outside of the visible time range.
fixedEventCls : Stringb-sch-event-fixed

private

The CSS class added to an event/assignment when it is not draggable.
generatedIdCls : Stringb-sch-dirty-new

private

The CSS class added to an event/assignment when it is newly created in the UI and unsynced with the server.
startsOutsideViewCls : Stringb-sch-event-startsoutside

private

The CSS class added to an event/assignment when it starts outside of the visible time range.
barMargin : Number10

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

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

Has a corresponding runtime barMargin property.
eventColor : EventColor

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.

Has a corresponding runtime eventColor property.
eventStyle : 'tonal'/'filled'/'bordered'/'traced'/'outlined'+ 9 moretonal
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
Has a corresponding runtime eventStyle property.
fillTicks : Booleanfalse

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.

Has a corresponding runtime fillTicks property.
managedEventSizing : Booleantrue

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.
tickSize : Number

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.

Has a corresponding runtime tickSize property.

Properties

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

isTimelineEventRendering : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TimelineEventRendering class, or subclass thereof.
eventColors : String[]

static

Predefined event colors, useful in combos etc.
eventStyles : String[]

static

Predefined event styles , useful in combos etc.

isTimelineEventRendering : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TimelineEventRendering class, or subclass thereof.
barMargin : Number10

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

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

Has a corresponding barMargin config.
eventColor : EventColor

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.

Has a corresponding eventColor config.
eventStyle : 'tonal'/'filled'/'bordered'/'traced'/'outlined'+ 9 moretonal
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
Has a corresponding eventStyle config.
fillTicks : Booleanfalse

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.

Has a corresponding fillTicks config.
tickSize : Number

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.

Has a corresponding tickSize config.

Functions

Functions are methods available for calling on the class

getTickSnappedDate( date, isEnd, eventRecord, fieldName )
: Date

private

Snaps a date to tick boundaries when fillTicks is enabled. Used by both horizontal and vertical rendering to ensure consistent behavior.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

tickSizeChange

Fired when the tick size changes.

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

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onTickSizeChange

Called when the tick size changes.

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

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-events-zindex	Event z-index

Source path

Scheduler/view/mixin/TimelineEventRendering.js

Inheritance tree1

TimelineEventRendering

TimelineEventRendering
Mixin

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree1

Contents

TimelineEventRendering Mixin

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree1

Contents

TimelineEventRendering
Mixin