Tutorial: HTML5 Event Calendar with Day/Week/Month Views (Javascript, PHP)

Features

• day view
• week view
• month view
• date navigator
• drag and drop event creating, moving and resizing enabled
• loading events using built-in .event.load()
• PHP backend
• SQLite sample database

Source code of the tutorial is available for download.

Example (JavaScript/HTML)

HTML5

<div style="float:left; width: 160px;">
    <div id="nav"></div>
</div>
<div style="margin-left: 160px;">
    <div class="space buttons">
        <a id="buttonDay" href="#">Day</a>
        <a id="buttonWeek" href="#">Week</a>
        <a id="buttonMonth" href="#">Month</a>
    </div>
    <div id="dpDay"></div>
    <div id="dpWeek"></div>
    <div id="dpMonth"></div>
</div>

JavaScript

<script type="text/javascript">

  // initialize the date navigator
  var nav = new DayPilot.Navigator("nav");
  nav.showMonths = 3;
  nav.skipMonths = 3;
  nav.init();
                 
  // initialize the day view
  var day = new DayPilot.Calendar("dpDay");
  day.viewType = "Day";
  addEventHandlers(day);
  day.init();

  // initialize the week view
  var week = new DayPilot.Calendar("dpWeek");
  week.viewType = "Week";
  addEventHandlers(week);
  week.init();

  // initialize the month view
  var month = new DayPilot.Month("dpMonth");
  addEventHandlers(month);
  month.init();

  // ...

  var switcher = new DayPilot.Switcher({
      triggers: [
          {id: "buttonDay", view: day },    // link buttonDay to day view
          {id: "buttonWeek", view: week},   // link buttonWeek to week view
          {id: "buttonMonth", view: month}  // link buttonMonth to month view
      ],
      navigator: nav,
      selectedClass: "selected-button",  // add this class to the selected trigger
      onChanged: function(args) {
          switcher.events.load("backend_events.php");   // action to be performed when the view or date changes - reload the events for the current view
      }
  });
  
  switcher.select("buttonWeek");

</script>