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

See Also

JavaScript

See also:

Example

<html>

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

  <!-- ... -->
</head>
<body>

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

  const dp = new DayPilot.Scheduler("dp", {
    theme: "scheduler_8",
    // ...
  });
  dp.init();

  <script>
</body>
</html>

Angular

CSS

@import url('themes/scheduler_8.css');

TypeScript

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';
import {DataService} from './data.service'; {}

@Component({
  selector: 'scheduler-component',
  template: `
    <daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>
  `,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  @ViewChild('scheduler')
  scheduler!: DayPilotSchedulerComponent;

  events: any[] = [];

  config: DayPilot.SchedulerConfig = {
    theme: "scheduler_8",
    // ...
  };

}

Tutorial:

React

Example:

CSS

@import url('themes/scheduler_white.css');

JSX:

<DayPilotScheduler
  theme={"scheduler_white"}
/>

Tutorial:

ASP.NET WebForms

Set the theme using Theme property.

Theme="scheduler_8"

Sample Scheduler Themes:

ASP.NET MVC

Several sample themes are available:

Specify the scheduler theme name using Theme property:

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
        BackendUrl = ResolveUrl("~/Scheduler/Backend"),
        Theme = "scheduler_green",
        ...
    })