CSS Classes

The Scheduler marks its layout, rows, timeline cells, events, links, and interaction states with CSS classes. You can use these classes for targeted styling beyond the common values exposed by the built-in theme.

The best way to find which class to use is to inspect a live instance of the Scheduler component using browser developer tools.

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

Names ending in X represent generated numeric suffixes. For example, *_event_lineX produces classes such as scheduler_default_event_line0 and scheduler_default_event_line1. Application-defined cssClass values are not included in this inventory.

This inventory applies to DayPilot Pro for JavaScript and its Angular, React, and Vue version. DayPilot Lite uses the same structure, but it may not include all these elements.

The built-in scheduler_default theme defines CSS custom properties on .scheduler_default_main. Use these variables for broad visual changes and element classes for targeted changes, or generate a complete theme using the Theme Designer. Load custom overrides after the theme styles:

body .scheduler_default_main {
  --dp-scheduler-event-background: #2563eb;
  --dp-scheduler-event-color: #fff;
  --dp-scheduler-header-bg-color: #f8fafc;
}

body .scheduler_default_event_inner {
  border-radius: 8px;
}

Layout and Status

• *_main: Scheduler root element.

• *_block: Interaction-blocking overlay.

• *_scrollable: Main scrolling viewport.

• *_matrix: Main timeline matrix.

• *_grid_main: Main row grid.

• *_grid_top, *_grid_bottom, *_grid_sticky: Frozen top, frozen bottom, and sticky row grids.

• *_direction_rtl: Right-to-left layout modifier.

• *_splitter: Splitter between the row headers and timeline.

• *_divider, *_divider_horizontal: Vertical and horizontal layout dividers.

• *_divider_horizontal_frozen_top, *_divider_horizontal_frozen_bottom, *_divider_horizontal_sticky: Dividers for frozen and sticky row grids.

• *_resourcedivider: Divider between resource rows.

• *_loading: Loading-status element.

• *_message, *_message_close: Message overlay and its close control.

Timeline and Column Headers

• *_corner, *_corner_inner: Upper-left corner and its inner element.

• *_timeheadergroup, *_timeheadergroup_inner: Time-header group and its inner element.

• *_timeheadercol, *_timeheadercol_inner: Time-header column and its inner element.

• *_timeheader_cell, *_timeheader_cell_inner: Shared time-header cell structure.

• *_timeheader_cell_last: Last time-header cell in a row.

• *_timeheader_cell_now: Time-header cell containing the current time.

• *_timeheader_float, *_timeheader_float_inner: Floating time-header label and its inner element.

• *_timeheader_scroll: Scrollable time-header container.

• *_columnheader, *_columnheader_inner: Task-list column-header area and its inner element.

• *_columnheader_cell, *_columnheader_cell_inner: Task-list column-header cell and its inner element.

• *_columnheader_splitter: Resizable column-header splitter.

Row Headers and Tree

• *_rowheader, *_rowheader_inner: Row header and its inner element.

• *_rowheader_inner_text, *_rowheader_inner_indent: Row-header text and tree indentation containers.

• *_rowheader_scroll: Scrollable row-header container.

• *_rowheadercol, *_rowheadercolX: Row-header column and its generated zero-based column modifier.

• *_header_icon, *_header_icon_show, *_header_icon_hide: Row-header visibility control and its states.

• *_tree_image_expand, *_tree_image_collapse, *_tree_image_no_children: Tree expand, collapse, and leaf indicators.

• *_row_new: New-row placeholder.

• *_rowheader_selected: Selected row header.

• *_sorticon, *_sorticon_active, *_sorticon_asc, *_sorticon_desc: Row-header column sort icon and its active direction.

Timeline Grid and Cells

• *_cell, *_cell_inner: Timeline cell and its inner element.

• *_cellparent: Cell belonging to a parent resource row.

• *_cell_business, *_cell_disabled: Business and disabled cell modifiers.

• *_cell_selected: Selected timeline cell.

• *_cell_focus, *_cell_focus_top, *_cell_focus_bottom: Keyboard-focused cell and its top/bottom focus-line modifiers.

• *_matrix_horizontal_line, *_matrix_vertical_line, *_matrix_vertical_break: Timeline grid lines and vertical timeline break.

• *_separator: Configured timeline separator.

• *_selected, *_selectionrectangle: Selected item modifier and rectangular selection overlay.

• *_crosshair_horizontal, *_crosshair_vertical, *_crosshair_left, *_crosshair_top: Crosshair lines and labels.

Events and Task Types

• *_event, *_event_inner: Event container and its inner content.

• *_event_hover, *_event_focus: Hovered and keyboard-focused event modifiers.

• *_event_bar, *_event_bar_inner: Duration/complete bar and its filled part.

• *_event_delete: Default event-delete control.

• *_event_float, *_event_float_inner: Floating event label and its inner element.

• *_event_group: Concurrent-event group placeholder.

• *_event_lineX: Generated event stacking-line modifier, where X is the zero-based line index.

• *_event_continueleft, *_event_continueright: Event continues beyond the rendered range on the left or right.

• *_event_left, *_event_right: Auxiliary HTML rendered to the left or right of an event.

• *_event_previous, *_event_version: Previous event version and version modifier.

• *_task_milestone: Milestone event modifier.

• *_task_group, *_task_parent: Group/parent task modifiers.

Event Moving and Selection

• *_shadow, *_shadow_inner: Event moving/resizing shadow and its inner element.

• *_shadow_forbidden, *_shadow_overlap, *_shadow_invalid: Forbidden-target, overlap, and invalid-position modifiers for the shadow.

• *_event_move_left, *_event_move_right: Event moving handles.

• *_event_moving_source: Source event while it is being moved.

Row Moving

• *_rowmove_handle, *_rowmove_source: Row-moving handle and source-row modifier.

• *_rowmove_position_before, *_rowmove_position_after, *_rowmove_position_child: Row drop-position indicators.

• *_rowmove_position_forbidden: Forbidden row drop position.

Dependency Links

• *_linkpoint, *_linkpoint_hover: Dependency-link connection point and its hover state.

• *_link_vertical, *_link_horizontal: Straight vertical and horizontal link segments.

• *_link_curve, *_link_curve_dot, *_link_curve_marker, *_link_curve_text: Curved link path, endpoints, marker, and label.

• *_link_curve_mshadow: Mouse interaction shadow for a curved link.

• *_link_dot: Straight-link endpoint dot.

• *_link_arrow_up, *_link_arrow_down, *_link_arrow_left, *_link_arrow_right: Directional link arrowheads.

• *_link_shadow, *_link_shadow_circle, *_link_mshadow: Link shadows and mouse interaction shadow.

• *_link_hover: Hovered dependency link.