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

You may need to adjust the event height and other properties to match the theme.

JavaScript

You can apply a custom CSS theme using the theme property in the JavaScript monthly calendar component.

When changing the theme, you need to load the corresponding CSS using <link>.

Example:

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

<!DOCTYPE html>
<html>
<head>
  <!-- ... -->
  <link href="css/month_dark.css" type="text/css" rel="stylesheet"/>
</head>
<body>

  <script src="daypilot-all.min.js"></script>

  <div id="month"></div>

  <script>

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

  </script>

</body>
</html>

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 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>

ASP.NET WebForms

CssOnly mode must be enabled first.

CssOnly="true"
CssClassPrefix="calendar_white"

Sample Monthly Calendar Themes:

ASP.NET MVC

Several sample themes are available:

You need to enable CssOnly mode:

CssOnly = true,

And specify the theme:

CssClassPrefix = “scheduler_white”

Example:

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
        BackendUrl = ResolveUrl("~/Month/Backend"),
        CssOnly = true,
        CssClassPrefix = "month_green",
        ...
    })

Availability

Availability of this feature in DayPilot editions:

ProductLitePro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java