All important DOM elements that are used to build the Scheduler UI are marked with CSS classes. You can use these classes to style the Scheduler as needed.
The best way to find which class to use is to inspect a live instance of the Scheduler component using browser developer tools.
Below, you will also find a list of all CSS classes used by the Scheduler component. The asterisk (*) will be replaced by the theme name specified using theme property (e.g. "scheduler_default_message" for the default theme).
The best way to customize the CSS theme is to generate a custom theme using the Theme Designer and edit the output CSS file.
Close icon of the message bar.
Main event box
Inner event box.
Depending on the line on which the event is placed in a row (not a row number). "X" specifies the line number.
Examples: *_event_line0, *_event_line1
A selected event (in addition to *_event).
Duration bar background, full width. Inside *_event.
Active area of the duration bar, depending on real duration or PercentComplete. Inside *_event_bar.
Events that start outside of the visible area.
Events that end outside of the visible area.
A floating div that is added to events at the top level (same as *_event) when the event is partially hidden. See also floating events.
A div inside *_event_float.
Optional HTML that can be displayed on the left side of an event (htmlLeft property of the event data object).
Optional HTML that can be displayed on the right side of an event (htmlRight property of the event data object).
This class is added to the event temporarily on mouse hover.
The "delete" icon that is displayed in the upper-right corner of an event (if event deleting is enabled).
This class is temporarily added to an event that is being dragged (see event moving).
Event version box. Note that *_event class is applied to event versions as well.
Collapsed group of concurrent events.
Moving/resizing/selecting position indicator.
This class is used to mark an indicator position that overlaps with existing event. It's temporarily added at the same level as *_shadow.
Current shadow position indicator (displayed on the left side).
Current shadow position indicator (displayed on the right side).
1px horizontal line between rows in the resource header.
Applied to every cell in the row header, including additional columns.
Applied to additional columns, in addition to *_rowheader.
Additional columns, in addition to *_rowheadercol and *_rowheader.
Examples: *_rowheadercol1, *_rowheadercol2
Expand icon box. Inside *_rowheader and *_rowheader_inner.
Collapse icon box. Inside *_rowheader and *_rowheader_inner.
Leaf node icon box. Inside *_rowheader and *_rowheader_inner.
Column header outer div.
Column header inner div.
Column header cell outer div.
Column header cell inner div.
Splitter between column header cells.
The topmost div.
Vertical 1px line between resources and the time part.
Horizontal 1px line between upper-left corner and resources.
A blocking overlay div that can be displayed over the Scheduler UI.
Upper-left corner box.
Main scrollable area with cells.
Grid with time cells, inside *_scrollable.
1px horizontal line between time cells.
1px vertical line between time cells.
1px vertical line placed over *_matrix_vertical_line if there is a time break at this point - a hidden column for ShowNonBusiness=false.
Vertical separator div.
If the cell is in a parent resource; in addition to *_cell.
This class is used to mark time header cells in the bottom row.
Time header group cell. This class is used to mark all time header cells except of the bottom row.
This class is used to mark all time header cells (in all rows). It's used in addition to *_timeheadergroup or *_timeheadercol.
A special div that is placed inside time header cells that are partially hidden. See also floating time headers.