The Month component marks its main DOM elements and interaction states with CSS classes. These classes let you style individual parts of the monthly calendar 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, *_event_inner becomes month_default_event_inner. Feature-specific and state classes are present 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.

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 .month_default_cell_header {
  font-weight: 600;
}

Layout and Status

  • *_main: Top-level Month element.

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

  • *_message: Message bar.

  • *_message_close: Close control in a message bar.

  • *_loading: Loading indicator.

Headers and Day Cells

  • *_header: Day-of-week header cell.

  • *_header_inner: Content element inside a day-of-week header.

  • *_cell: Day cell.

  • *_cell_inner: Inner element of a day cell.

  • *_cell_header: Header area inside a day cell, normally containing the day number.

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

  • *_previous: Added to a day cell from the previous month.

  • *_next: Added to a day cell from the next month.

Events

  • *_event: Main 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_continueleft: Event that starts before the visible week segment.

  • *_event_continueright: Event that ends after the visible week segment.

  • *_event_timeleft: Start-time label displayed on the left side of an event.

  • *_event_timeright: End-time label displayed on the right side of an event.

  • *_event_delete: Built-in event delete control.

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

  • *_selected: Added to a selected event.

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_forbidden: Added when the current drag-and-drop position is not allowed.