Timesheet
Work-hour tracking interface on a JavaScript spreadsheet. It allows editable rows for employee time logs, totals, and date ranges—suitable for HR tools, attendance tracking, or payroll exports.
<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZmIyN2NjNGIwMDMzMzNmNDE5YjcwY2YyMmM5ZWZkNjc4NjgyZDU1NWRhODA0OTYyNTEwM2JkNWY4YjZhZTBlMTdjMjI3YTQ4N2VkZTExZDMwN2MzY2IwNWI4MmZlOWUyOGQ2NjllZWY3ZTc5YjM2NWYzNzYwZTkzM2RhNmZmNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNalEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
guid: "0fc12e95-e5ac-4c8c-9823-2c0630e6b70c",
tabs: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
worksheetName: "Sheet1",
defaultColWidth: 50,
columns: [
{ "width": 104, "type": "text" },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "width": 104, "type": "text" },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 }
],
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:"],
null,
["", "", null, null, "Supervisor Name:"],
null,
[null, "", "", null, "Week:", 45500],
null,
null,
["Day of the week","Normal","Overtime","Sick","Vacation","Holiday","Unpaid","Other","Total"],
["=F8", null, null, null, null, null, null, null, "=SUM(B12:H12)"],
["=A12+1",null,null,null,null,null,null,null,"=SUM(B13:H13)",null,""],
["=A13+1", null, null, null, null, null, null, null, "=SUM(B14:H14)"],
["=A14+1", null, null, null, null, null, null, null, "=SUM(B15:H15)"],
["=A15+1", null, null, null, null, null, null, null, "=SUM(B16:H16)"],
["=A16+1", null, null, null, null, null, null, null, "=SUM(B17:H17)"],
["=A17+1", null, null, null, null, null, null, null, "=SUM(B18:H18)"],
["Total Hrs:","=SUM(B12:B18)","=SUM(C12:C18)","=SUM(D12:D18)","=SUM(E12:E18)","=SUM(F12:F18)","=SUM(G12:G18)","=SUM(H12:H18)","=SUM(I12:I18)"],
["Rate/Hour:", 12, 15, 15, 15, 15, 0, 0],
["Total Pay:","=B19*B20","=C19*C20","=D19*D20","=E19*E20","=F19*F20","=G19*G20","=H19*H20","=SUM(B21:H21)"]
],
style: {
"A1:I1": 11,
"A2:C3": 1,
"A4": 0,
"E4": 2,
"G4:I4": 3,
"A6": 1,
"E6": 2,
"G6:I6": 3,
"E8": 2,
"A11": 12,
"B11:H11": 13,
"I11": 12,
"A12:A17": 4,
"B12:H17": 9,
"I12:I17": 5,
"A18": 6,
"B18:H18": 10,
"I18": 7,
"A19:H19": 14,
"I19": 15,
"B20:H20": 8,
"A21:H21": 16,
"I21": 17
},
cells: {
"F8": { "format": "dd/mm/yyyy" },
"A12": { "format": "dd/mm/yyyy" },
"A13": { "format": "dd/mm/yyyy" },
"A14": { "format": "dd/mm/yyyy" },
"A15": { "format": "dd/mm/yyyy" },
"A16": { "format": "dd/mm/yyyy" },
"A17": { "format": "dd/mm/yyyy" },
"A18": { "format": "dd/mm/yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1]
},
worksheetId: "38661542-a39a-4b46-b84e-4645056c3e90",
rows: [
{ "height": 43 }
],
}
],
style: [
"text-align:center",
"text-align:center;font-weight:bold",
"font-weight:bold",
"border-bottom:1px solid black",
"border-top:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"",
"border-top:1px solid black;border-left:1px solid black;text-align:center",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;text-align:center",
"text-align:center;font-weight:bold;background-color:#ffc107;color:#fdffff;font-size:x-large",
"background-color:#ffb300;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#ffb300;color:#f7fffd",
"background-color:#ffecb3",
"background-color:#ffecb3;font-weight:bold",
"background-color:#ffd54f;color:#fdffff",
"background-color:#ffd54f;font-weight:bold;color:#fdffff"
],
toolbar: true
});
</script>
</html>
import React, { useEffect, useRef } from "react";
import 'jspreadsheet/dist/jspreadsheet.css';
import 'jsuites/dist/jsuites.css';
import jspreadsheet from 'jspreadsheet';
import './App.css';
export default function App() {
const spreadsheetRef = useRef(null);
useEffect(() => {
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZmIyN2NjNGIwMDMzMzNmNDE5YjcwY2YyMmM5ZWZkNjc4NjgyZDU1NWRhODA0OTYyNTEwM2JkNWY4YjZhZTBlMTdjMjI3YTQ4N2VkZTExZDMwN2MzY2IwNWI4MmZlOWUyOGQ2NjllZWY3ZTc5YjM2NWYzNzYwZTkzM2RhNmZmNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNalEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
const instance = jspreadsheet(spreadsheetRef.current, {
guid: "0fc12e95-e5ac-4c8c-9823-2c0630e6b70c",
tabs: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
worksheetName: "Sheet1",
defaultColWidth: 50,
columns: [{ width: 100 },{},{},{},{},{},{},{},{ width: 100 }],
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:"],
null,
["", "", null, null, "Supervisor Name:"],
null,
[null, "", "", null, "Week:", "45500"],
null,
null,
["Day of the week","Normal","Overtime","Sick","Vacation","Holiday","Unpaid","Other","Total"],
["=F8", "", null, ""],
["=A12+1", "", null, ""],
["=A13+1", ""],
["=A14+1", ""],
["=A15+1", ""],
["=A16+1", ""],
["=A17+1", ""],
["Total Hrs:","=SUM(B12:B18)","=SUM(C12:C18)","=SUM(D12:D18)","=SUM(E12:E18)","=SUM(F12:F18)","=SUM(G12:G18)","=SUM(H12:H18)","=SUM(I12:I18)"],
["Rate/Hour:", 12, 15, 15, 15, 15, 0, 0],
["Total Pay:","=B19*B20","=C19*C20","=D19*D20","=E19*E20","=F19*F20","=G19*G20","=H19*H20","=SUM(B21:H21)"]
],
style: {
"A1:I1": 11,
"A2:C3": 1,
"A4": 0,
"E4": 2,
"G4:I4": 3,
"A6": 1,
"E6": 2,
"G6:I6": 3,
"E8": 2,
"A11": 12,
"B11:H11": 13,
"I11": 12,
"A12:A17": 4,
"B12:H17": 9,
"I12:I17": 5,
"A18": 6,
"B18:H18": 10,
"I18": 7,
"A19:H19": 14,
"I19": 15,
"B20:H20": 8,
"A21:H21": 16,
"I21": 17
},
cells: {
"F8": { "format": "dd/mm/yyyy" },
"A12": { "format": "dd/mm/yyyy" },
"A13": { "format": "dd/mm/yyyy" },
"A14": { "format": "dd/mm/yyyy" },
"A15": { "format": "dd/mm/yyyy" },
"A16": { "format": "dd/mm/yyyy" },
"A17": { "format": "dd/mm/yyyy" },
"A18": { "format": "dd/mm/yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1]
}
}
],
autoId: true,
style: [
"text-align:center",
"text-align:center;font-weight:bold",
"font-weight:bold",
"border-bottom:1px solid black",
"border-top:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"",
"border-top:1px solid black;border-left:1px solid black;text-align:center",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;text-align:center",
"text-align:center;font-weight:bold;background-color:#ffc107;color:#fdffff;font-size:x-large",
"background-color:#ffb300;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#ffb300;color:#f7fffd",
"background-color:#ffecb3",
"background-color:#ffecb3;font-weight:bold",
"background-color:#ffd54f;color:#fdffff",
"background-color:#ffd54f;font-weight:bold;color:#fdffff"
],
toolbar: true
});
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:tabs="tabs"
:table-width="tableWidth"
:table-height="tableHeight"
:resizable="resizable"
:worksheets="worksheets"
:styles="globalStyle"
:toolbar="toolbar"
:tableOverflow="true"
/>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
export default {
components: { Spreadsheet, Worksheet },
data() {
return {
// Set your JSS license key (The following key only works for one day)
license: 'ZmIyN2NjNGIwMDMzMzNmNDE5YjcwY2YyMmM5ZWZkNjc4NjgyZDU1NWRhODA0OTYyNTEwM2JkNWY4YjZhZTBlMTdjMjI3YTQ4N2VkZTExZDMwN2MzY2IwNWI4MmZlOWUyOGQ2NjllZWY3ZTc5YjM2NWYzNzYwZTkzM2RhNmZmNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNalEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9',
tabs: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
worksheetName: "Sheet1",
defaultColWidth: 50,
columns: [{ width: 100 },{},{},{},{},{},{},{},{ width: 100 }],
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:"],
null,
["", "", null, null, "Supervisor Name:"],
null,
[null, "", "", null, "Week:", "45500"],
null,
null,
["Day of the week","Normal","Overtime","Sick","Vacation","Holiday","Unpaid","Other","Total"],
["=F8", "", null, ""],
["=A12+1", "", null, ""],
["=A13+1", ""],
["=A14+1", ""],
["=A15+1", ""],
["=A16+1", ""],
["=A17+1", ""],
["Total Hrs:","=SUM(B12:B18)","=SUM(C12:C18)","=SUM(D12:D18)","=SUM(E12:E18)","=SUM(F12:F18)","=SUM(G12:G18)","=SUM(H12:H18)","=SUM(I12:I18)"],
["Rate/Hour:", 12, 15, 15, 15, 15, 0, 0],
["Total Pay:","=B19*B20","=C19*C20","=D19*D20","=E19*E20","=F19*F20","=G19*G20","=H19*H20","=SUM(B21:H21)"]
],
style: {
"A1:I1": 11,
"A2:C3": 1,
"A4": 0,
"E4": 2,
"G4:I4": 3,
"A6": 1,
"E6": 2,
"G6:I6": 3,
"E8": 2,
"A11": 12,
"B11:H11": 13,
"I11": 12,
"A12:A17": 4,
"B12:H17": 9,
"I12:I17": 5,
"A18": 6,
"B18:H18": 10,
"I18": 7,
"A19:H19": 14,
"I19": 15,
"B20:H20": 8,
"A21:H21": 16,
"I21": 17
},
cells: {
"F8": { "format": "dd/mm/yyyy" },
"A12": { "format": "dd/mm/yyyy" },
"A13": { "format": "dd/mm/yyyy" },
"A14": { "format": "dd/mm/yyyy" },
"A15": { "format": "dd/mm/yyyy" },
"A16": { "format": "dd/mm/yyyy" },
"A17": { "format": "dd/mm/yyyy" },
"A18": { "format": "dd/mm/yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1]
}
}
],
toolbar: true,
globalStyle: [
"text-align:center",
"text-align:center;font-weight:bold",
"font-weight:bold",
"border-bottom:1px solid black",
"border-top:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"",
"border-top:1px solid black;border-left:1px solid black;text-align:center",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;text-align:center",
"text-align:center;font-weight:bold;background-color:#ffc107;color:#fdffff;font-size:x-large",
"background-color:#ffb300;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#ffb300;color:#f7fffd",
"background-color:#ffecb3",
"background-color:#ffecb3;font-weight:bold",
"background-color:#ffd54f;color:#fdffff",
"background-color:#ffd54f;font-weight:bold;color:#fdffff"
]
};
},
};
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZmIyN2NjNGIwMDMzMzNmNDE5YjcwY2YyMmM5ZWZkNjc4NjgyZDU1NWRhODA0OTYyNTEwM2JkNWY4YjZhZTBlMTdjMjI3YTQ4N2VkZTExZDMwN2MzY2IwNWI4MmZlOWUyOGQ2NjllZWY3ZTc5YjM2NWYzNzYwZTkzM2RhNmZmNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpjd09EQTBNalEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
@Component({
standalone: true,
selector: 'app-root',
template: `<div #spreadsheet></div>`,
})
export class AppComponent {
@ViewChild('spreadsheet', { static: true }) spreadsheet!: ElementRef;
ngAfterViewInit() {
jspreadsheet(this.spreadsheet.nativeElement, {
tabs: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
worksheetName: "Sheet1",
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:"],
["", "", null, null, "Supervisor Name:"],
[null, "", "", null, "Week:", "45500"],
[],[],[],[],
["Day of the week","Normal","Overtime","Sick","Vacation","Holiday","Unpaid","Other","Total"],
["=F8", "", null, ""],
["=A12+1", "", null, ""],
["=A13+1", ""],
["=A14+1", ""],
["=A15+1", ""],
["=A16+1", ""],
["=A17+1", ""],
["Total Hrs:","=SUM(B12:B18)","=SUM(C12:C18)","=SUM(D12:D18)","=SUM(E12:E18)","=SUM(F12:F18)","=SUM(G12:G18)","=SUM(H12:H18)","=SUM(I12:I18)"],
["Rate/Hour:", 12, 15, 15, 15, 15, 0, 0],
["Total Pay:","=B19*B20","=C19*C20","=D19*D20","=E19*E20","=F19*F20","=G19*G20","=H19*H20","=SUM(B21:H21)"]
],
style: {
"A1:I1": 11,
"A2:C3": 1,
"A4": 0,
"E4": 2,
"G4:I4": 3,
"A6": 1,
"E6": 2,
"G6:I6": 3,
"E8": 2,
"A11": 12,
"B11:H11": 13,
"I11": 12,
"A12:A17": 4,
"B12:H17": 9,
"I12:I17": 5,
"A18": 6,
"B18:H18": 10,
"I18": 7,
"A19:H19": 14,
"I19": 15,
"B20:H20": 8,
"A21:H21": 16,
"I21": 17
},
cells: {
"F8": { "format": "dd/mm/yyyy" },
"A12": { "format": "dd/mm/yyyy" },
"A13": { "format": "dd/mm/yyyy" },
"A14": { "format": "dd/mm/yyyy" },
"A15": { "format": "dd/mm/yyyy" },
"A16": { "format": "dd/mm/yyyy" },
"A17": { "format": "dd/mm/yyyy" },
"A18": { "format": "dd/mm/yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1]
}
}
],
autoId: true,
style: [
"text-align:center",
"text-align:center;font-weight:bold",
"font-weight:bold",
"border-bottom:1px solid black",
"border-top:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"",
"border-top:1px solid black;border-left:1px solid black;text-align:center",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;text-align:center",
"text-align:center;font-weight:bold;background-color:#ffc107;color:#fdffff;font-size:x-large",
"background-color:#ffb300;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#ffb300;color:#f7fffd",
"background-color:#ffecb3",
"background-color:#ffecb3;font-weight:bold",
"background-color:#ffd54f;color:#fdffff",
"background-color:#ffd54f;font-weight:bold;color:#fdffff"
],
toolbar: true
});
}
}