Tutorial: HTML5 Timesheet (JavaScript, PHP)

Tutorial:

• HTML5 Timesheet (JavaScript, PHP)

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>