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:

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

<!-- ... --->

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

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

</script>

ASP.NET WebForms

CssOnly mode is enabled by default.

Theme="calendar_white"

Sample Calendar Themes:

ASP.NET MVC

Several sample themes are available:

The CssOnly mode is enabled by default.

Specify the theme using Theme property:

Theme = "scheduler_white"

Example:

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