DayPilot.Calendar.theme

The theme property (string) sets the CSS theme used by the JavaScript Calendar component.

Declaration

DayPilot.Calendar.theme

Default Value

"calendar_default"

Notes

The theme name determines the CSS class prefix applied to the calendar markup.

Sample themes are included in the DayPilot package, and you can create custom themes using the DayPilot Theme Designer.

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

Examples

JavaScript

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

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

const calendar = new DayPilot.Calendar("dp", {
  theme: "calendar_dark",
  // ...
});
calendar.init();

Angular

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

@import "./themes/calendar_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-calendar",
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-calendar [config]="config"></daypilot-calendar>`
})
export class DarkCalendarComponent {
  config: DayPilot.CalendarConfig = {
    theme: "calendar_dark",
    startDate: "2026-10-12",
    viewType: "Week",
    events: [{id: 1, text: "Planning workshop", start: "2026-10-12T09:00:00", end: "2026-10-12T11:00:00"}]
  };
}

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 {DayPilotCalendar} from "daypilot-pro-react";
import "./themes/calendar_dark.css";

export default function DarkCalendar() {
  return (
    <DayPilotCalendar
      theme="calendar_dark"
      startDate="2026-10-12"
      viewType="Week"
      events={[{id: 1, text: "Planning workshop", start: "2026-10-12T09:00:00", end: "2026-10-12T11:00:00"}]}
    />
  );
}

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 {DayPilotCalendar} from "daypilot-pro-vue";
import "./themes/calendar_dark.css";

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

<template>
  <DayPilotCalendar
    theme="calendar_dark"
    startDate="2026-10-12"
    viewType="Week"
    :events="events"
  />
</template>

See Also

CSS Themes [doc.daypilot.org]

CSS [doc.daypilot.org]

DayPilot.Calendar Class