The Navigator date picker appearance is defined using CSS.

CSS Themes

The Navigator uses CSS themes:

  1. Customizable DOM elements are marked with CSS classes. Each class name is prefixed with the theme ID.
  2. DayPilot includes a built-in theme which is embedded in the library (no additional dependencies are required). The ID of the built-in theme is "navigator_default".

Appearance Customization using CSS

  1. You can create your own CSS theme using a visual Theme Designer application. You can use it to change common properties (font, background colors, etc.) and generate a custom CSS theme file.
  2. You can override selected properties of the default theme by adding a CSS style with a more specific selector.

Default CSS Theme

javascript date picker navigator default css theme

This is the built-in default theme (navigator_default):

.navigator_default_main { border-left: 1px solid #c0c0c0;border-right: 1px solid #c0c0c0;border-bottom: 1px solid #c0c0c0;background-color: white;color: #000000; box-sizing: content-box; }
.navigator_default_main *, .navigator_default_main *:before, .navigator_default_main *:after { box-sizing: content-box; }
.navigator_default_month { font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size: 12px; }
.navigator_default_day { color: black; }
.navigator_default_weekend { background-color: #f0f0f0; }
.navigator_default_dayheader { color: black; }
.navigator_default_line { border-bottom: 1px solid #c0c0c0; }
.navigator_default_dayother { color: gray; }
.navigator_default_todaybox { border: 1px solid red; }
.navigator_default_title, .navigator_default_titleleft, .navigator_default_titleright", 'border-top: 1px solid #c0c0c0;border-bottom: 1px solid #c0c0c0;color: #333;background: #f3f3f3;');
.navigator_default_busy { font-weight: bold; }
.navigator_default_cell { text-align: center; }
.navigator_default_select .navigator_default_cell_box { background-color: #FFE794; opacity: 0.5; }
.navigator_default_title { text-align: center; }
.navigator_default_titleleft, .navigator_default_titleright { text-align: center; }
.navigator_default_dayheader { text-align: center; }
.navigator_default_weeknumber { text-align: center; color: #999; }
.navigator_default_cell_text { cursor: pointer; }

Customization Example: Override Selected Styles

javascript date picker navigator css customization

This example overrides the default styles for today class (.navigator_default_todaybox) and date range selection (.navigator_default_select .navigator_default_cell_box).

Note that the CSS uses body to make the selectors more specific. This way it will take precedence over the CSS from the default theme.

body .navigator_default_todaybox { border: 2px solid red; border-radius: 20px; }
body .navigator_default_select .navigator_default_cell_box { background-color: #FFE794; opacity: 1; border-radius: 20px; }

JavaScript Example

To apply a custom theme called my_theme, you need to include the stylesheet and use the theme property to activate it.

<!doctype html>
<html>
<head>
  <link href="my_theme.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- ... --->

<div id="nav"></div>

<script>

  const nav = new DayPilot.Navigator("nav", {
    // ...
    theme: 2,
    skipMonths: 2
  });

  nav.init();

</script>
</body>
</html>