The Calendar marks its main DOM elements and interaction states with CSS classes. You can use these classes for targeted styling that is not covered by the built-in theme variables.

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

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

For common colors, borders, spacing, and typography, start with the built-in CSS custom properties or generate a theme using the Theme Designer. Use a sufficiently specific selector when overriding the embedded default theme:

body .calendar_default_event_inner {
  border-radius: 6px;
}

Layout and Status

  • *_main: Top-level Calendar element.

  • *_direction_rtl: Added to the Calendar in right-to-left mode.

  • *_block: Overlay that temporarily blocks interaction.

  • *_message: Message bar.

  • *_message_close: Close control in a message bar.

  • *_loading: Loading indicator.

  • *_scroll: Scrollable Calendar viewport.

  • *_scroll_up: Automatic upward-scroll indicator during drag and drop.

  • *_scroll_down: Automatic downward-scroll indicator during drag and drop.

Headers and Corners

  • *_corner: Upper-left corner element.

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

  • *_cornerright: Upper-right corner element.

  • *_cornerright_inner: Content element inside the upper-right corner.

  • *_colheader: Column header cell.

  • *_colheader_inner: Content element inside a column header.

  • *_colheader_back: Background layer of a column header.

  • *_colheader_back_inner: Inner background layer of a column header.

  • *_colheader_splitter: Splitter between adjacent column headers.

  • *_colmove_handle: Column-moving drag handle.

  • *_colmove_source: Source-column marker during column moving.

  • *_colmove_position_before: Drop-position marker before a column.

  • *_colmove_position_after: Drop-position marker after a column.

  • *_colmove_position_child: Drop-position marker for a child column.

  • *_colmove_position_forbidden: Forbidden column drop-position marker.

  • *_rowheader: Time-axis row header.

  • *_rowheader_inner: Content element inside a time-axis row header.

  • *_rowheader_minutes: Minutes part of a time-axis label.

  • *_rowheader_simple: Time-axis header used by simplified header rendering.

  • *_alldayheader: Header cell for the all-day event area.

  • *_alldayheader_inner: Content element inside the all-day header.

Time Grid

  • *_cell: Calendar time cell.

  • *_cell_inner: Inner element of a time cell.

  • *_cell_business: Added to cells inside the configured business hours.

  • *_now: Current-time indicator.

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

Timed Events

  • *_event: Main timed-event element.

  • *_event_inner: Inner event element that carries the event background, border, and content.

  • *_event_bar: Event duration-bar container.

  • *_event_bar_inner: Filled part of the event duration bar.

  • *_event_withheader: Added to an event rendered with a separate header area.

  • *_event_delete: Built-in event delete control.

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

  • *_event_hover: Added while the pointer is over an event.

  • *_selected: Added to a selected event.

All-Day Events

  • *_alldayevent: Main all-day event element.

  • *_alldayevent_inner: Inner all-day event element.

  • *_alldayevent_hover: Added while the pointer is over an all-day event.

  • *_alldayevent_continueleft: All-day event that starts before the visible range.

  • *_alldayevent_continueright: All-day event that ends after the visible range.

Drag-and-Drop Shadow

  • *_shadow: Position indicator used during moving, resizing, and time-range selection.

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

  • *_shadow_top: Top part of a multi-part shadow.

  • *_shadow_bottom: Bottom part of a multi-part shadow.

  • *_shadow_forbidden: Added when the current drag-and-drop position is not allowed.