DayPilot.Navigator.theme

The theme property (string) sets the CSS theme used by the Navigator. The default theme ("navigator_default") is built into the library. You can generate a custom theme using the online theme designer.

Declaration

DayPilot.Navigator.theme

Default Value

"navigator_default"

Notes

Set theme to the CSS theme id of the built-in or custom Navigator theme that you want to apply.

The Lite JavaScript archive includes demo/themes/navigator_dark.css since version 2026.4.895. Load this external stylesheet and set theme to "navigator_dark". Setting the property does not load CSS automatically. The matching calendar_dark and month_dark themes use the same palette.

See Date Picker CSS for stylesheet setup and matching Calendar/Month demos.

Examples

JavaScript

const dp = new DayPilot.Navigator("dp", {
  theme: "navigator_default",
  // ...
});
dp.init();

Angular

<daypilot-navigator [config]="config"></daypilot-navigator>

config: DayPilot.NavigatorConfig = {
  theme: "navigator_default",
  // ...
};

React

<DayPilotNavigator
  theme="navigator_default"
/>

Vue

<DayPilotNavigator
  theme="navigator_default"
/>

See Also

Online Theme Designer

DayPilot.Navigator Class