CSS Themes

The Calendar component can be fully styled using CSS themes. You can create your own theme easily using the online WYSIWYG CSS Theme Designer.

JavaScript Calendar

In the JavaScript Calendar, you can use the theme property to set a custom CSS theme:

DayPilot Pro for JavaScript includes the calendar_dark theme in demo/themes/calendar_dark.css. The Dark Theme demo shows its dark backgrounds, light text and rounded events.

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

<!-- ... -->

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

<script type="text/javascript">
  
  const dp = new DayPilot.Calendar("dp", {
    viewType: "Day",
    theme: "calendar_dark",
    // ....
  });
  dp.init();

</script>

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.

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>

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

<DayPilot:DayPilotCalendar
  ...
  Theme="calendar_white"
/>

Theme = "scheduler_white"

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  Theme = "calendar_green",
  ...
})