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.
Message Box
*_message
Message bar.
*_message_close
Close icon of the message bar.
Events
*_event
Main event box
*_event_inner
Inner event box.
*_event_lineX
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
*_selected
A selected event (in addition to *_event).
*_event_bar
Duration bar background, full width. Inside *_event.
*_event_bar_inner
Active area of the duration bar, depending on real duration or PercentComplete. Inside *_event_bar.
*_event_continueleft
Events that start outside of the visible area.
*_event_continueright
Events that end outside of the visible area.
*_event_float
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.
*_event_float_inner
A div inside *_event_float.
*_event_left
Optional HTML that can be displayed on the left side of an event (htmlLeft property of the event data object).
*_event_right
Optional HTML that can be displayed on the right side of an event (htmlRight property of the event data object).
*_event_hover
This class is added to the event temporarily on mouse hover.
*_event_delete
The "delete" icon that is displayed in the upper-right corner of an event (if event deleting is enabled).
*_event_moving_source
This class is temporarily added to an event that is being dragged (see event moving).
*_event_version
Event version box. Note that *_event class is applied to event versions as well.
*_event_group
Collapsed group of concurrent events.
Event Shadow
*_shadow
Moving/resizing/selecting position indicator.
*_shadow_inner
Inside *_shadow.
*_shadow_overlap
This class is used to mark an indicator position that overlaps with existing event. It's temporarily added at the same level as *_shadow.
*_shadow_forbidden
Temporarily added to the indicator at the same level as *_shadow when the current position is forbidden (e.g. when overlap is forbidden or disabled cells are used).
*_event_move_left
Current shadow position indicator (displayed on the left side).
*_event_move_right
Current shadow position indicator (displayed on the right side).
*_link_curve_mshadow
Curved link shadow: When there are existing links attached to the moved event, the Scheduler draws a link shadow which has this class specified in addition to the *_link_curve class.
*_link_mshadow
Right-angled link shadow: When there are existing links attached to the moved event, the Scheduler draws a link shadow which has this class specified in addition to the *_link class.
New Link Shadow
*_link_shadow
The line highlighting the new link position.
*_link_shadow_circle
The circle displayed at the end of the new link shadow.
Rows
*_resourcedivider
1px horizontal line between rows in the resource header.
*_rowheader
Applied to every cell in the row header, including additional columns.
*_rowheadercol
Applied to additional columns, in addition to *_rowheader.
*_rowheadercolX
Additional columns, in addition to *_rowheadercol and *_rowheader.
Examples: *_rowheadercol1, *_rowheadercol2
*_rowheader_inner
Inside *_rowheader.
*_tree_image_expand
Expand icon box. Inside *_rowheader and *_rowheader_inner.
*_tree_image_collapse
Collapse icon box. Inside *_rowheader and *_rowheader_inner.
*_tree_image_no_children
Leaf node icon box. Inside *_rowheader and *_rowheader_inner.
Right-Angled Links
*_link_horizontal
Horizontal lines used in the links.
*_link_vertical
Vertical lines used in the links.
*_link_arrow_right
End of the link: an arrow pointing to the right.
*_link_arrow_left
End of the link: an arrow pointing to the left.
*_link_arrow_up
End of the link: an arrow pointing up.
*_link_arrow_down
End of the link: an arrow pointing down.
*_link_dot
A dot connecting two adjacent events.
Curved Links
*_link_curve
The link SVG path.
*_link_curve_dot
A dot connecting two adjacent linked events.
*_link_curve_marker
The marker that displays the arrow at the end of a link.
*_link_curve_text
The text displayed above the link curve.
Column Headers
*_columnheader
Column header outer div.
*_columnheader_inner
Column header inner div.
*_columnheader_cell
Column header cell outer div.
*_columneheader_cell_inner
Column header cell inner div.
*_columnheader_splitter
Splitter between column header cells.
Main
*_main
The topmost div.
*_divider
Vertical 1px line between resources and the time part.
*_divider_horizontal
Horizontal 1px line between upper-left corner and resources.
*_block
A blocking overlay div that can be displayed over the Scheduler UI.
Upper-Left Corner
*_corner
Upper-left corner box.
*_corner_inner
Inside *_corner.
Grid
*_scrollable
Main scrollable area with cells.
*_matrix
Grid with time cells, inside *_scrollable.
*_loading
Loading label.
*_matrix_horizontal_line
1px horizontal line between time cells.
*_matrix_vertical_line
1px vertical line between time cells.
*_matrix_vertical_break
1px vertical line placed over *_matrix_vertical_line if there is a time break at this point - a hidden column for ShowNonBusiness=false.
*_separator
Vertical separator div.
Grid Cells
*_cell
Grid cell.
*_cellparent
If the cell is in a parent resource; in addition to *_cell.
Time Header
*_timeheadercol
This class is used to mark time header cells in the bottom row.
*_timeheadercol_inner
Inside *_timeheadercol.
*_timeheadergroup
Time header group cell. This class is used to mark all time header cells except of the bottom row.
*_timeheadergroup_inner
Inside *_timeheadergroup.
*_timeheader_cell
This class is used to mark all time header cells (in all rows). It's used in addition to *_timeheadergroup or *_timeheadercol.
*_timeheader_cell_inner
Inside *_timeheader_cell.
*_timeheader_float
A special div that is placed inside time header cells that are partially hidden. See also floating time headers.
*_timeheader_float_inner
Inside *_timeheader_float.