DayPilot.Scheduler.theme

The theme property (string) sets the id of the CSS theme applied to the JavaScript Scheduler component.

Declaration

DayPilot.Scheduler.theme

Default Value

null

Notes

Use a theme id such as "scheduler_white" that matches the loaded Scheduler theme stylesheet.

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

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

Examples

JavaScript

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

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

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

Angular

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

@import "./themes/scheduler_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-scheduler",
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`
})
export class DarkSchedulerComponent {
  config: DayPilot.SchedulerConfig = {
    theme: "scheduler_dark",
    startDate: "2026-10-12",
    days: 7,
    scale: "Day",
    resources: [{id: "A", name: "Room A"}],
    events: [{id: 1, resource: "A", 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 {DayPilotScheduler} from "daypilot-pro-react";
import "./themes/scheduler_dark.css";

export default function DarkScheduler() {
  return (
    <DayPilotScheduler
      theme="scheduler_dark"
      startDate="2026-10-12"
      days={7}
      scale="Day"
      resources={[{id: "A", name: "Room A"}]}
      events={[{id: 1, resource: "A", 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 {DayPilotScheduler} from "daypilot-pro-vue";
import "./themes/scheduler_dark.css";

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

<template>
  <DayPilotScheduler
    theme="scheduler_dark"
    startDate="2026-10-12"
    :days="7"
    scale="Day"
    :resources="resources"
    :events="events"
  />
</template>

See Also

CSS Themes [doc.daypilot.org]

DayPilot.Scheduler Class