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:

<!DOCTYPE html>
<html>
<head>
  <!-- ... -->
  <link href="css/month_white.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_white",
      // ...
    });
    month.init();

  </script>

</body>
</html>

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",
        ...
    })