Lite

Online Demo

Download

Tutorial

License

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

Weekly Event Calendar

event-calendar-javascript-jquery-html5-week.png

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

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

</script>

Demo:

Daily Event Calendar

event-calendar-javascript-jquery-html5-day.png

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

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

</script>

Demo:

Monthly Event Calendar

event-calendar-javascript-jquery-html5-month.png

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

<script type="text/javascript">

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

</script>

Demo:

Date Navigator

event-calendar-javascript-jquery-html5-week-navigator.png

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

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.

event-calendar-javascript-jquery-html5-green-css-theme.png

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

event-calendar-javascript-jquery-html5-month-green-css-theme.png

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

<script type="text/javascript">

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

</script>

Demo:

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.

event-calendar-javascript-jquery-html5-transparent-css-theme.png

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

event-calendar-javascript-jquery-html5-month-transparent-css-theme.png

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

<script type="text/javascript">

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

</script>

Demo:

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.

event-calendar-javascript-jquery-html5-white-css-theme.png

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

event-calendar-javascript-jquery-html5-month-white-css-theme.png

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

<script type="text/javascript">

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

</script>

Demo:

Add

  • Load events
  • Change a date
  • Event moving
  • Event resizing
  • Event creating
  • jQuery

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java