.timesheet-calculator-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.timesheet-calculator-wrapper h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.tc-controls {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
padding: 15px;
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.tc-control-group {
flex: 1;
min-width: 200px;
}
.tc-control-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
font-size: 0.9em;
color: #555;
}
.tc-control-group input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.tc-grid {
width: 100%;
border-collapse: collapse;
background: #fff;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.tc-grid th, .tc-grid td {
padding: 10px;
border: 1px solid #eee;
text-align: center;
}
.tc-grid th {
background-color: #f0f4f8;
color: #333;
font-weight: 600;
font-size: 0.9em;
}
.tc-grid input[type="time"], .tc-grid input[type="number"] {
width: 90%;
padding: 6px;
border: 1px solid #ddd;
border-radius: 4px;
text-align: center;
}
.tc-btn {
display: block;
width: 100%;
padding: 15px;
background-color: #0073aa;
color: white;
border: none;
border-radius: 6px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
}
.tc-btn:hover {
background-color: #005177;
}
.tc-results {
margin-top: 25px;
padding: 20px;
background: #fff;
border-left: 5px solid #0073aa;
border-radius: 4px;
display: none;
}
.tc-result-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.tc-result-row.total {
border-bottom: none;
font-size: 1.2em;
font-weight: bold;
color: #0073aa;
margin-top: 10px;
padding-top: 10px;
border-top: 2px solid #eee;
}
.tc-error {
color: #d63638;
font-size: 0.9em;
margin-top: 5px;
display: none;
}
@media (max-width: 600px) {
.tc-grid, .tc-grid tbody, .tc-grid tr, .tc-grid td {
display: block;
width: 100%;
box-sizing: border-box;
}
.tc-grid thead { display: none; }
.tc-grid tr {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px;
}
.tc-grid td {
text-align: left;
border: none;
padding: 5px 0;
}
.tc-grid td::before {
content: attr(data-label);
font-weight: bold;
display: block;
margin-bottom: 3px;
font-size: 0.85em;
color: #666;
}
.tc-grid input {
width: 100% !important;
}
}
function calculateTimesheet() {
var hourlyRate = parseFloat(document.getElementById('tc_hourly_rate').value);
var otThreshold = parseFloat(document.getElementById('tc_ot_threshold').value);
var otMultiplier = parseFloat(document.getElementById('tc_ot_multiplier').value);
var errorDiv = document.getElementById('tc_error_msg');
var resultDiv = document.getElementById('tc_results');
// Reset UI
errorDiv.style.display = 'none';
errorDiv.innerHTML = ";
resultDiv.style.display = 'none';
// Validation
if (isNaN(hourlyRate) || hourlyRate < 0) {
errorDiv.innerHTML = 'Please enter a valid Hourly Pay Rate.';
errorDiv.style.display = 'block';
return;
}
if (isNaN(otThreshold)) otThreshold = 40;
if (isNaN(otMultiplier)) otMultiplier = 1.5;
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
var totalMinutes = 0;
for (var i = 0; i < days.length; i++) {
var day = days[i];
var startVal = document.getElementById('start_' + day).value;
var endVal = document.getElementById('end_' + day).value;
var breakVal = parseFloat(document.getElementById('break_' + day).value) || 0;
if (startVal && endVal) {
var startParts = startVal.split(':');
var endParts = endVal.split(':');
var startMin = parseInt(startParts[0]) * 60 + parseInt(startParts[1]);
var endMin = parseInt(endParts[0]) * 60 + parseInt(endParts[1]);
var diff = endMin – startMin;
// Handle overnight shift (e.g. 10PM to 2AM)
if (diff 0) {
totalMinutes += diff;
}
}
}
if (totalMinutes === 0) {
errorDiv.innerHTML = 'Please enter valid start and end times for at least one day.';
errorDiv.style.display = 'block';
return;
}
// Calculations
var totalHours = totalMinutes / 60;
var regHours = 0;
var otHours = 0;
if (totalHours > otThreshold) {
regHours = otThreshold;
otHours = totalHours – otThreshold;
} else {
regHours = totalHours;
otHours = 0;
}
var regPay = regHours * hourlyRate;
var otPay = otHours * (hourlyRate * otMultiplier);
var totalPay = regPay + otPay;
// Display Results
document.getElementById('res_reg_hours').innerText = regHours.toFixed(2) + ' hrs';
document.getElementById('res_ot_hours').innerText = otHours.toFixed(2) + ' hrs';
document.getElementById('res_reg_pay').innerText = '$' + regPay.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
document.getElementById('res_ot_pay').innerText = '$' + otPay.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
document.getElementById('res_total_pay').innerText = '$' + totalPay.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
resultDiv.style.display = 'block';
}
Weekly Timesheet & Pay Calculator
(e.g., 1.5 for Time and a Half)
| Day | Start Time | End Time | Unpaid Break (Minutes) |
|---|---|---|---|
| ' + days[i] + ' | '); document.write(''); document.write(' | '); document.write(' | '); document.write(' |
Total Regular Hours:
0.00
Total Overtime Hours:
0.00
Regular Pay:
$0.00
Overtime Pay:
$0.00
Total Gross Pay:
$0.00
How to Use the Timesheet Calculator
Tracking your work hours accurately is essential for ensuring you receive the correct compensation. This tool simplifies the process of converting clock-in and clock-out times into decimal hours and gross pay. Here is a step-by-step guide:
- Set Your Pay Rate: Enter your current hourly wage in the top field.
- Configure Overtime: By default, the calculator uses the standard 40-hour workweek threshold. If your contract specifies overtime after a different number of weekly hours, adjust this value. You can also change the multiplier (e.g., set to 1.5 for "time and a half" or 2.0 for "double time").
- Enter Daily Hours: For each day you worked, input your Start Time and End Time. The calculator supports standard AM/PM or 24-hour formats depending on your device settings.
- Deduct Breaks: Enter the total minutes of unpaid break time (e.g., lunch breaks) for each day to ensure they are subtracted from your total billable hours.
Understanding Gross Pay and Overtime
This calculator determines your Gross Pay, which is the total amount earned before taxes and other deductions. It automatically separates "Regular Hours" from "Overtime Hours" based on the threshold you set.
Regular Pay Formula: Calculated as Regular Hours × Hourly Rate.
Overtime Pay Formula: Calculated as Overtime Hours × (Hourly Rate × Overtime Multiplier). For example, if you earn $20/hr and work 5 hours of overtime at time-and-a-half (1.5x), your overtime pay would be $150 ($30/hr for 5 hours).
Decimal Hours Conversion
One of the most confusing aspects of manual payroll calculation is converting minutes into decimal hours. For example, working 8 hours and 30 minutes is not 8.3 hours; it is 8.5 hours. This tool handles this conversion automatically:
- 15 minutes = 0.25 hours
- 30 minutes = 0.50 hours
- 45 minutes = 0.75 hours
Using an automated calculator prevents rounding errors that can lead to underpayment or payroll discrepancies.