Tutorial: HTML5 Event Calendar (Open-Source)

A new tutorial on creating a HTML5 event calendar using the open-source DayPilot Lite JavaScript library. Includes a sample PHP project. Full source code available for download.

Feb 24, 2014

Weekly HTML5 event calendar in a simle web application (tutorial):

HTML5 Event Calendar (JavaScript, PHP), open-source

Features:

Weekly HTML5 event calendar
Pure JavaScript (no third-party libraries required)
Open source (Apache License 2.0)
Drag and drop event moving
Drag and drop event resizing
CSS themes
Easy initialization
Compatible with jQuery (jQuery 1.x, jQuery 2.x)

Full source code is available for download.

Quick initialization sample (JavaScript):

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

Loading events sample (JavaScript):

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Week";
  dp.events.list = [
  {
    "id":"5",
    "text":"Calendar Event 5",
    "start":"2014-02-25T10:30:00",
    "end":"2014-02-25T16:30:00"
  },
  {
    "id":"6",
    "text":"Calendar Event 6",
    "start":"2014-02-24T09:00:00",
    "end":"2014-02-24T14:30:00"
  },
  {
    "id":"7",
    "text":"Calendar Event 7",
    "start":"2014-02-27T12:00:00",
    "end":"2014-02-27T16:00:00"
  }];
  dp.init();
</script>

Transparent CSS Theme

Green CSS Theme

White CSS Theme

Products

Resources

Tools

About Us

DayPilot Pro