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.

javascript-scheduler-css-developer-tools.png

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).

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.

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).

Resources

*_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

No children icon box. Inside *_rowheader and *_rowheader_inner.

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 Cell

*_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.

Time Cells

*_cell

Time cell. Only in full rendering mode (see *_cellcolumn below).

*_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.