DayPilot CSS Theme Designer

Create a CSS theme

Scheduler

Event Calendar

Monthly Event Calendar

Gantt Chart

Kanban

Navigator

How to apply the CSS theme?

When saving the CSS theme, specify the desired Theme Prefix (for example, mytheme).
Download the theme and include the CSS file in your app using a <link> tag:
```
<link rel="stylesheet" href="mytheme.css">
```
In your app, set the theme property of the component to the prefix you specified earlier:
```
<script>
const scheduler = new DayPilot.Scheduler({
  theme: 'mytheme',
  // ...
});
```

Does the Theme Designer support the open-source version of DayPilot as well?

Yes. You can generate themes for the Calendar, Month, and Navigator components from the open-source DayPilot Lite package.

Can I edit the CSS file after downloading it?

Yes. You can edit the CSS file in any text editor. The most common styles are defined as CSS variables (--dp-*), so you can easily change the values without having to search through the entire file.

Can I edit an existing theme online?

Yes. You will find the URL of the theme at the top of the CSS file. You can use the URL to open the theme in the Theme Designer, and create a copy of it.

Can I use the theme in a React application?

Yes. The themes generated by the Theme Designer are standard CSS files and can be used in any web application, including React ones.

return (
  <DayPilotScheduler
    theme="mytheme"
    // other properties
  />
);

Can I use the theme in a Vue application?

Yes. The themes generated by the Theme Designer are standard CSS files and can be used in any web application, including Vue ones.

<template>
  <DayPilotScheduler
    theme="mytheme"
    // other properties
  />
</template>

Can I use the theme in an Angular application?

Yes. The themes generated by the Theme Designer are standard CSS files and can be used in any web application, including Angular ones.

config: DayPilot.SchedulerConfig = {
  theme: 'mytheme',
  // other properties
}