scheduler component css theme javascript angular react vue

The JavaScript Scheduler component can be fully styled using CSS themes.

DayPilot includes a built-in theme ("scheduler_default") that is embedded in the library. It is loaded automatically - you don't have to add any external CSS file.

To apply a custom theme to the Scheduler component, two steps are required:

  • Include the theme CSS in the page (usually it will be a standalone CSS file).

  • Set the theme to be used using the theme configuration property of the Scheduler.

DayPilot includes a couple of sample CSS themes (see the /demo/themes directory in the download package).

You can create your own theme easily using the online WYSIWYG CSS Theme Designer. The Theme Designer lets you customize the appearance of the key Scheduler elements, preview the changes immediately using a live instance of the Scheduler and download the CSS theme in a zip file.

See Also

JavaScript Scheduler

In JavaScript, you can apply a custom CSS theme using the theme property.

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 Scheduler

In the Angular Scheduler component, you can set the CSS theme using the theme property of the configuration object (config in the example below).

You can also change the CSS theme dynamically by changing this.config.theme anytime later. Angular will detect the change an update the Scheduler automatically.

It is necessary to include the theme CSS file in the HTML file. The best way to add the CSS theme to the application is to use an @import statement in src/styles.css.

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 Scheduler

You can set the CSS theme of  the React Scheduler component using the theme attribute of the <DayPilotScheduler> tag in JSX.

The CSS file with the theme definition must be included in the React application. The following example adds the scheduler_white.css theme using an @import statement in src/index.css file.

Example:

CSS

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

JSX:

<DayPilotScheduler
  theme={"scheduler_white"}
/>

Tutorial:

Vue Scheduler

The Vue Scheduler component supports definition of a custom CSS them using the theme property of the config object.

Also, include the theme CSS file in the application (this example uses @import in the <style> section of the Vue component).

<template>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        theme: "scheduler_green",
      },
    }
  },
  components: {
    DayPilotScheduler
  },
  
  // ...
  
}
</script>

<style>
  @import './assets/themes/scheduler_green.css';
</style>

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