The Navigator date picker marks its main DOM elements and selection states with CSS classes. You can use the classes for targeted styling, or customize common colors and typography using the CSS custom properties defined by the built-in theme.

In the lists below, * is the value of the theme property. With the default theme, *_todaybox becomes navigator_default_todaybox.

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 also generate a complete theme using the Theme Designer. For a targeted override of the embedded default theme, use a sufficiently specific selector:

body .navigator_default_todaybox {
  border: 2px solid #cc0000;
  border-radius: 50%;
}

Layout

  • *_main: Top-level Navigator element.

  • *_month: Container for one displayed month.

  • *_line: Separator between displayed months.

Title and Navigation

  • *_title: Month-title element.

  • *_titleleft: Previous-period navigation element.

  • *_titleright: Next-period navigation element.

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

  • *_weeknumber: Week-number cell.

Day Cells

  • *_cell: Calendar cell element.

  • *_daybox: Inner box used for an ordinary day.

  • *_cell_box: Inner box used for the visible day marker and selection background.

  • *_cell_text: Element containing the day number.

  • *_day: Day cell inside the displayed month.

  • *_dayother: Day cell outside the displayed month.

  • *_today: Added to today's date.

  • *_weekend: Added to weekend cells.

  • *_todaybox: Marker around today's date.

  • *_busy: Added to a date marked as busy.

  • *_free: Added to a date marked as free.

Selection and Today Button

  • *_select: Added to selected date cells; normally used together with *_cell_box.

  • *_todaysection: Container for the optional Today button.

  • *_todaysection_button: The optional Today button.