The Scheduler comes with a default built-in theme and a pack of additional themes:
- Blue
- Green
- Transparent
- Traditional
- White
- Windows 8
You can set the theme using theme property:
<div id="dp"></div>
<script type="text/javascript">
var dp = new DayPilot.Scheduler("dp");
dp.theme = "scheduler_8";
dp.init();
</script>
See also CSS themes [doc.daypilot.org].
Default CSS Theme
![javascript scheduler default theme javascript scheduler default theme](https://javascript.daypilot.org/page/image/ci2kmlb4inhtfgz5rzdu7us6hi/javascript-scheduler-default-theme.png)
- You don't need to include any .css file (it is included in daypilot-all.min.js).
- You can customize it in the theme designer. It is the starting configuration of a new scheduler theme.
Blue CSS Theme
![javascript scheduler blue theme javascript scheduler blue theme](https://javascript.daypilot.org/page/image/chi6jcgr4ncwdky2cafc5ev4ha/javascript-scheduler-blue-theme.png)
- Defined in themes/scheduler_blue.css.
- Requires a wrapper around the scheduler div:
<div class="scheduler_blue_wrap"><div class="scheduler_blue_wrap_inner">
<div id="dp"></div>
</div></div>
Green CSS Theme
![javascript scheduler green theme javascript scheduler green theme](https://javascript.daypilot.org/page/image/oi3frmrztvhvjh7u42w6kooqxm/javascript-scheduler-green-theme.png)
- Defined in themes/scheduler_green.css.
Traditional CSS Theme
![javascript scheduler traditional theme javascript scheduler traditional theme](https://javascript.daypilot.org/page/image/vc5wnowljvdhxfkumkaqs4vcqa/javascript-scheduler-traditional-theme.png)
- Defined in themes/scheduler_traditional.css.
Transparent CSS Theme
![javascript scheduler transparent theme javascript scheduler transparent theme](https://javascript.daypilot.org/page/image/atgxmqw4pbf3lfd4ygz3xcrxce/javascript-scheduler-transparent-theme.png)
- Defined in themes/scheduler_transparent.css.
White CSS Theme
![javascript scheduler white theme javascript scheduler white theme](https://javascript.daypilot.org/page/image/uajgfshhcnfkhbghsntxgtarua/javascript-scheduler-white-theme.png)
- Defined in themes/scheduler_white.css.
Windows 8 Theme
![javascript scheduler windows 8 theme javascript scheduler windows 8 theme](https://javascript.daypilot.org/page/image/cptsjxcycjfd5pr46my5aj32ui/javascript-scheduler-windows-8-theme.png)
- Defined in themes/scheduler_8.css.