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.

To apply a theme, it has to be included in the page:

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

Then you need to activate it using the Theme property:

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