🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A really simple yet useful jQuery plugin which helps calculate the duration of worked hours in a grid and show total worked hours of the week just like in the Excel.

Time-Sheet

Documentation

jQuery Worked Hours Grid plugin Build Status Build status

jQuery plugin used to calculate worked durations in worked hours grids.

Demo

See the demo subdirectory.

Usage

  1. Include jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  1. Include plugin's code:
<script src="dist/jquery.worked-hours-grid.min.js"></script>
  1. Create a HTML table to represent worked hours of the week:
Days Morning Afternoon Duration
Monday 14:00 to 17:45 3h 45min
Tuesday 8:30 to 12:30 14:00 to 17:45 7h 45min
Wednesday 8:30 to 12:30 14:00 to 17:45 7h 45min
Thursday 8:30 to 12:30 14:00 to 17:45 7h 45min
Friday 8:30 to 12:30 14:00 to 17:45 7h 45min
Saturday 8:30 to 12:30 4h
Sunday
Total 38h 30min

The default configuration use:

  • .row class to select a row of time ranges and duration sum (HTML <tr>),
  • .range class to select each time range in a row (HTML <span> with two <input>, one for start, one for end time),
  • .start class to select the start time (HTML <input>) in each range,
  • .end class to select the end time (HTML <input>) in each range,
  • .sum class to select the sum field (HTML <td>) in each row,
  • .total class to select the total field (HTML <td>) in the grid (footer row).
  1. Call the plugin:
$("#element").workedHoursGrid({     units: {         hours: "h",         minutes: "min",         seconds: "s"     },     selectors: {         row: ".row",         range: ".range",         start: ".start",         end: ".end",         sum: ".sum",         total: ".total"     } });

Team

jQuery Worked Hours Grid plugin was created by Laurent LAPORTE, with help from these contributors.

Credits


You May Also Like