CSS Classes

The Gantt component marks tasks, links, rows, columns, and timeline elements with CSS classes. The classes can be used to customize individual Gantt elements beyond the common values exposed as built-in theme variables.

In the lists below, * is the value of the theme property. With the default theme, *_task_milestone becomes gantt_default_task_milestone. Feature-specific and state classes are added only when the corresponding feature or state is active.

This inventory applies to DayPilot Pro for JavaScript and its Angular, React, and Vue wrappers. Other DayPilot product editions may render a different class surface.

You can generate a complete custom theme using the Theme Designer. For a targeted override of the embedded default theme, use a sufficiently specific selector:

body .gantt_default_task_milestone .gantt_default_event_inner {
  background: #38761d;
}

Layout and Status

• *_main: Top-level Gantt element.

• *_block: Overlay that temporarily blocks interaction.

• *_message: Message bar.

• *_message_close: Close control in a message bar.

• *_loading: Loading indicator.

• *_splitter: Splitter between the task-list area and the timeline.

• *_divider: Vertical divider between the task-list area and the timeline.

• *_divider_horizontal: Horizontal divider between headers and rows.

• *_divider_horizontal_frozen_top: Divider next to top frozen rows.

• *_divider_horizontal_frozen_bottom: Divider next to bottom frozen rows.

• *_divider_horizontal_sticky: Divider used by sticky row-header rendering.

• *_corner: Upper-left corner element.

• *_corner_inner: Content element inside the upper-left corner.

• *_scrollable: Main scrollable timeline viewport.

• *_matrix: Timeline grid container.

• *_grid_main: Main timeline grid layer.

• *_grid_top: Grid layer for top frozen rows.

• *_grid_sticky: Grid layer for sticky rows.

• *_grid_bottom: Grid layer for bottom frozen rows.

• *_separator: Timeline separator element.

• *_selectionrectangle: Rectangle used for multi-selection.

Tasks

• *_event: Main task box. Gantt uses the shared event rendering surface for tasks.

• *_event_inner: Inner task box that carries the background, border, and content.

• *_event_bar: Task progress-bar container.

• *_event_bar_inner: Completed part of the task progress bar.

• *_event_continueleft: Task that starts before the visible timeline.

• *_event_continueright: Task that ends after the visible timeline.

• *_event_float: Floating task overlay used when the task start is outside the viewport.

• *_event_float_inner: Inner element of the floating task overlay.

• *_event_left: Custom task content displayed to the left of the task box.

• *_event_right: Custom task content displayed to the right of the task box.

• *_event_delete: Built-in task delete control.

• *_event_moving_source: Added to the source task while it is being moved.

• *_event_version: Task version box.

• *_event_lineX: Generated line-position class, such as *_event_line0.

• *_selected: Added to a selected task.

• *_task_group: Added to a task group.

• *_task_parent: Added to a parent task.

• *_task_milestone: Added to a milestone.

Task Links

• *_link_horizontal: Horizontal segment of a right-angled link.

• *_link_vertical: Vertical segment of a right-angled link.

• *_link_arrow_right: Right-pointing link arrow.

• *_link_arrow_left: Left-pointing link arrow.

• *_link_arrow_up: Up-pointing link arrow.

• *_link_arrow_down: Down-pointing link arrow.

• *_link_curve: SVG path of a curved link.

• *_link_curve_dot: Dot used by a curved link.

• *_link_curve_marker: Arrow marker used by a curved link.

• *_link_curve_text: Text displayed with a curved link.

• *_link_hover: Added to link elements while the link is hovered.

• *_linkpoint: Task link-creation point.

• *_linkpoint_hover: Added to a hovered link-creation point.

• *_link_shadow: New-link position indicator.

• *_link_shadow_circle: Circle at the end of a new-link indicator.

• *_link_mshadow: Right-angled link shadow shown while moving a task.

• *_link_curve_mshadow: Curved link shadow shown while moving a task.

Task Rows

• *_resourcedivider: Horizontal divider between task-list rows.

• *_rowheader: Task-list row header cell.

• *_rowheader_inner: Inner task-list row header element.

• *_rowheader_inner_text: Text container inside a task-list row header.

• *_rowheader_inner_indent: Tree indentation area inside a task-list row header.

• *_rowheader_selected: Added to a selected task-list row header.

• *_rowheadercol: Additional task-list column cell.

• *_rowheadercolX: Generated additional-column class, such as *_rowheadercol1.

• *_rowheader_scroll: Scrollable task-list header container.

• *_row_new: New-row entry element.

• *_rowmove_handle: Row-moving drag handle.

• *_rowmove_source: Source-row marker during row moving.

• *_rowmove_position_before: Drop-position marker before a row.

• *_rowmove_position_after: Drop-position marker after a row.

• *_rowmove_position_child: Drop-position marker for a child row.

• *_rowmove_position_forbidden: Forbidden row drop-position marker.

• *_header_icon: Task-list show/hide control.

• *_header_icon_hide: Added while the task-list area is visible.

• *_header_icon_show: Added while the task-list area is hidden.

• *_tree_image_expand: Expand control for a collapsed task group.

• *_tree_image_collapse: Collapse control for an expanded task group.

• *_tree_image_no_children: Tree marker for a row without children.

Task-List Columns

• *_columnheader: Task-list column header container.

• *_columnheader_inner: Inner task-list column header container.

• *_columnheader_cell: Individual task-list column header cell.

• *_columnheader_cell_inner: Inner element of a task-list column header cell.

• *_columnheader_splitter: Column-resizing splitter.

Timeline Grid and Cells

• *_matrix_horizontal_line: Horizontal timeline grid line.

• *_matrix_vertical_line: Vertical timeline grid line.

• *_matrix_vertical_break: Grid line at a hidden-time break.

• *_cell: Timeline cell.

• *_cell_business: Added to configured business-time cells.

• *_cell_selected: Added to cells in a selected row.

• *_cellparent: Added to cells in a parent task row.

Timeline Headers

• *_timeheader: Timeline header area.

• *_timeheader_scroll: Scrollable timeline header container.

• *_timeheadercol: Header cell in the bottom header row.

• *_timeheadercol_inner: Inner element of a bottom-row header cell.

• *_timeheadergroup: Grouped header cell above the bottom row.

• *_timeheadergroup_inner: Inner element of a grouped header cell.

• *_timeheader_cell: Shared class added to timeline header cells in every row.

• *_timeheader_cell_inner: Inner element paired with *_timeheader_cell.

• *_timeheader_cell_last: Added to the last visible timeline header cell.

• *_timeheader_cell_now: Added to the timeline header cell containing the current time.

• *_timeheader_float: Floating content for a partially hidden timeline header.

• *_timeheader_float_inner: Inner element of floating timeline-header content.

Interaction Indicators

• *_shadow: Task moving or resizing position indicator.

• *_shadow_inner: Inner element of the drag-and-drop shadow.

• *_shadow_overlap: Added when the shadow overlaps another task.

• *_shadow_forbidden: Added when the current position is not allowed.

• *_event_move_left: Position indicator shown to the left of the shadow.

• *_event_move_right: Position indicator shown to the right of the shadow.

• *_crosshair_horizontal: Horizontal crosshair line.

• *_crosshair_vertical: Vertical crosshair line.

• *_crosshair_left: Crosshair label shown at the left edge.

• *_crosshair_top: Crosshair label shown at the top edge.