Tutorial: HTML5 Timesheet (JavaScript, PHP)

This tutorial shows how to create a monthly timesheet in HTML5/JavaScript. Includes PHP AJAX backend source code and sample SQLite database.
Jun 19, 2014
html5 timesheet javascript php

Tutorial:

Features:

  • HTML5 monthly timesheet, one day per row
  • Uses DayPilot JavaScript Scheduler control
  • Supports multiple users, switching using a <select> control
  • Displays day summary (total time) in day headers
  • Highlights business hours
  • Pure JavaScript solution with no third party libraries required
  • Sample PHP backend with SQLite database
  • Compatible with jQuery
  • Drag and drop record creating, moving and resizing

Source code of the tutorial is available for download.

Basic Example

Displaying a monthly HTML5 timesheet:

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

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.viewType = "Days";

  dp.startDate = new DayPilot.Date().firstDayOfMonth();
  dp.days = dp.startDate.daysInMonth();

  dp.timeHeaders = [
    { groupBy: "Day", format: "MMMM yyyy" },
    { groupBy: "Hour"}
  ];

  dp.init();
</script>