Open-Source

DayPilot Lite

DayPilot Lite is an open-source version of DayPilot. It can help you build calendar, personal scheduling, and resource booking applications. 

Online Demo

• Online Demo

Download

• Download

What's New

• Release History

Tutorials

• HTML5/JavaScript Event Calendar (Open-Source)
  Event calendar introduction - week view, loading data, drag and drop, CSS themes, sample PHP AJAX backend.
• AngularJS Event Calendar Tutorial (Open-Source)
  Sample AngularJS calendar application: Day and week view, loading data using AJAX, drag and drop, event editing using a modal dialog. PHP backend.

License

DayPilot Lite for JavaScript is open-source (Apache License 2.0).

Weekly Event Calendar

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

<script type="text/javascript">
  
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Week";
  dp.init();

</script>

Demo:

• http://javascript.daypilot.org/demo/lite/calendar/week.html

Daily Event Calendar

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

<script type="text/javascript">
  
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Day";
  dp.init();

</script>

Demo:

• http://javascript.daypilot.org/demo/lite/calendar/day.html

Monthly Event Calendar

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

<script type="text/javascript">

  var dp = new DayPilot.Month("dp");
  dp.init();

</script>

Demo:

• http://javascript.daypilot.org/demo/lite/month/

Date Navigator

<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:

• http://javascript.daypilot.org/demo/lite/calendar/navigator.html

Green CSS Theme

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:

• http://javascript.daypilot.org/demo/lite/calendar/themegreen.html

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

<script type="text/javascript">

  var dp = new DayPilot.Month("dp");
  dp.theme = "month_green";
  dp.init();

</script>

Demo:

• http://javascript.daypilot.org/demo/lite/month/themegreen.html

Transparent CSS Theme

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:

• http://javascript.daypilot.org/demo/lite/calendar/themetransparent.html

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

<script type="text/javascript">

  var dp = new DayPilot.Month("dp");
  dp.theme = "month_transparent";
  dp.init();

</script>

Demo:

• http://javascript.daypilot.org/demo/lite/month/themetransparent.html

White CSS Theme

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:

• http://javascript.daypilot.org/demo/lite/calendar/themewhite.html

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

<script type="text/javascript">

  var dp = new DayPilot.Month("dp");
  dp.theme = "month_white";
  dp.init();

</script>

Demo:

• http://javascript.daypilot.org/demo/lite/month/themewhite.html