DayPilot.Month.theme

The theme property (string) sets the calendar CSS theme.

Declaration

DayPilot.Month.theme

Default Value

"month_default"

Notes

The DayPilot Pro for JavaScript download includes demo/themes/month_dark.css. Load this stylesheet and set this property to "month_dark". Setting the property does not load the stylesheet automatically.

The DayPilot Lite JavaScript archive also includes demo/themes/month_dark.css since version 2026.4.895. Copy the stylesheet into your application and set theme to "month_dark". Try the Lite Dark Theme demo.

For a matching date picker, load navigator_dark.css and set the Navigator's theme to "navigator_dark". See Date Picker CSS.

Examples

JavaScript

Include the stylesheet once in the application, using the path where you copied the theme file:

<link rel="stylesheet" href="themes/month_dark.css">

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

Angular

Set the theme in a typed configuration object for the Angular component. Copy month_dark.css to src/themes and load it from the application's global src/styles.css:

@import "./themes/month_dark.css";

The standalone component imports DayPilotModule and binds the configuration in its template:

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-dark-month",
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-month [config]="config"></daypilot-month>`
})
export class DarkMonthComponent {
  config: DayPilot.MonthConfig = {
    theme: "month_dark",
    startDate: "2026-10-01",
    events: [{id: 1, text: "Planning workshop", start: "2026-10-12", end: "2026-10-14"}]
  };
}

React

Pass the theme and data as individual props to the React component. Place the stylesheet in a themes directory beside this component and import it:

import {DayPilotMonth} from "daypilot-pro-react";
import "./themes/month_dark.css";

export default function DarkMonth() {
  return (
    <DayPilotMonth
      theme="month_dark"
      startDate="2026-10-01"
      events={[{id: 1, text: "Planning workshop", start: "2026-10-12", end: "2026-10-14"}]}
    />
  );
}

Vue

This single-file Vue component imports the stylesheet and passes the theme and data as individual props. Place the theme CSS in the adjacent themes directory. The stylesheet applies globally to the generated DayPilot elements.

<script setup>
import {DayPilotMonth} from "daypilot-pro-vue";
import "./themes/month_dark.css";

const events = [{id: 1, text: "Planning workshop", start: "2026-10-12", end: "2026-10-14"}];
</script>

<template>
  <DayPilotMonth
    theme="month_dark"
    startDate="2026-10-01"
    :events="events"
  />
</template>

See Also

CSS Themes [doc.daypilot.org]

DayPilot.Month Class