CSS Themes

The JavaScript Scheduler component can be fully styled using CSS themes.

DayPilot includes a built-in theme ("scheduler_default") that is embedded in the library. It is loaded automatically - you don't have to add any external CSS file.

To apply a custom theme to the Scheduler component, two steps are required:

• Include the theme CSS in the page (usually it will be a standalone CSS file).

• Set the theme to be used using the theme configuration property of the Scheduler.

The DayPilot Pro for JavaScript download includes sample CSS themes in the demo/themes directory, including scheduler_dark.css. The Dark Theme demo shows dark headers and cells with light text and rounded events.

You can create your own theme easily using the online WYSIWYG CSS Theme Designer. The Theme Designer lets you customize the appearance of the key Scheduler elements, preview the changes immediately using a live instance of the Scheduler and download the CSS theme in a zip file.

You can customize the Dark Theme in the Theme Designer. The demo links to this starting palette; adjust its colors, save the theme and download the CSS. Use the downloaded theme's prefix as the theme value.

A downloaded theme is a separate CSS file. When updating DayPilot, download the current version of your theme from the Theme Designer and replace the CSS file in your application. Keep application-specific overrides separately so you can reapply them after updating the theme.

See Also

• Scheduler CSS classes

JavaScript Scheduler

In JavaScript, you can apply a custom CSS theme using the theme property.

Example

<html>

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

  <!-- ... -->
</head>
<body>

  <div id="dp"></div>
  <script>

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

  </script>
</body>
</html>

Angular Scheduler

Set the theme in a typed configuration object for the Angular Scheduler. 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"}]
  };
}

You can change the theme later by updating config.theme. Angular updates the Scheduler automatically.

Tutorial:

• Angular Scheduler: CSS Themes

React Scheduler

Pass the theme and data as individual props to the React Scheduler. 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"}]}
    />
  );
}

Tutorial:

• How to Use CSS Themes with the React Scheduler Component

Vue Scheduler

This single-file Vue Scheduler 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>

Theme="scheduler_8"

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
        BackendUrl = ResolveUrl("~/Scheduler/Backend"),
        Theme = "scheduler_green",
        ...
    })