Get E-mail Notifications Get notifications when new releases are available.
DayPilot Lite is an open-source version of DayPilot. It can help you build calendar, personal scheduling, and resource booking applications.
DayPilot Lite for JavaScript is open-source (Apache License 2.0).
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Calendar("dp"); dp.viewType = "Week"; dp.init(); </script>
Demo:
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Calendar("dp"); dp.viewType = "Day"; dp.init(); </script>
Demo:
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Month("dp"); dp.init(); </script>
Demo:
<div style="float:left; width: 150px;"> <div id="nav"></div> </div> <div style="margin-left: 150px;"> <div id="dp"></div> </div> <script type="text/javascript"> var nav = new DayPilot.Navigator("nav"); nav.showMonths = 3; nav.selectMode = "week"; nav.onTimeRangeSelected = function(args) { dp.startDate = args.start; dp.update(); }; nav.init(); var dp = new DayPilot.Calendar("dp"); dp.viewType = "Week"; dp.init(); </script>
Demo:
The Green CSS theme is included in the DayPilot package (calendar_green.css, month_green.css).
You can create your own theme using the online CSS theme designer.
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Calendar("dp"); dp.theme = "calendar_green"; dp.viewType = "Week"; dp.init(); </script>
Demo:
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Month("dp"); dp.theme = "month_green"; dp.init(); </script>
Demo:
The Transparent CSS theme is included in the DayPilot package (calendar_transparent.css, month_transparent.css).
You can create your own theme using the online CSS theme designer.
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Calendar("dp"); dp.theme = "calendar_transparent"; dp.viewType = "Week"; dp.init(); </script>
Demo:
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Month("dp"); dp.theme = "month_transparent"; dp.init(); </script>
Demo:
The White CSS Theme is included in the DayPilot package (calendar_white.css, month_white.css).
You can create your own theme using the online CSS theme designer.
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Calendar("dp"); dp.theme = "calendar_white"; dp.viewType = "Week"; dp.init(); </script>
Demo:
<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Month("dp"); dp.theme = "month_white"; dp.init(); </script>
Demo: