The Navigator date picker appearance is defined using CSS.
CSS Themes
The Navigator uses CSS themes:
- Customizable DOM elements are marked with CSS classes. Each class name is prefixed with the theme ID.
- 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
- 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.
- You can override selected properties of the default theme by adding a CSS style with a more specific selector.
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
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>