Products

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/v11/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<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('NWJiODNjZTFmZmI3NDA4NzAwN2E4MTM0NTU0MjU2YWZkMzc3YjE0N2ExN2EzNjUxYzMxOGUxZDM2ODAyNTFjNTNiM2JmZDk3ZTgzZDUwOGQ3NDA4ZTdmZjQyNWNmYWYyM2M1ODJlOWUwMzdjZWU1ZTU3Y2E5ZDFiYjUwMTZmNDQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOall4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    "guid": "0fc12e95-e5ac-4c8c-9823-2c0630e6b70c",
    "tabs": true,
    "worksheets": [
        {
        "minDimensions": [20, 100],
        "tableOverflow": true,
        "tableWidth": 1300,
        "tableHeight": 620,
        "resize": "both",
        "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:", "27/07/2024"],
            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": 41,
            "B1": 41,
            "C1": 41,
            "D1": 41,
            "E1": 41,
            "F1": 41,
            "G1": 41,
            "H1": 41,
            "I1": 41,
            "A2": 1,
            "B2": 1,
            "C2": 1,
            "A3": 1,
            "B3": 1,
            "C3": 1,
            "A4": 0,
            "E4": 6,
            "G4": 7,
            "H4": 7,
            "I4": 7,
            "A6": 1,
            "E6": 6,
            "G6": 7,
            "H6": 7,
            "I6": 7,
            "E8": 6,
            "A11": 42,
            "B11": 43,
            "C11": 43,
            "D11": 43,
            "E11": 43,
            "F11": 43,
            "G11": 43,
            "H11": 43,
            "I11": 42,
            "A12": 12,
            "B12": 23,
            "C12": 23,
            "D12": 23,
            "E12": 23,
            "F12": 23,
            "G12": 23,
            "H12": 23,
            "I12": 13,
            "A13": 12,
            "B13": 23,
            "C13": 23,
            "D13": 23,
            "E13": 23,
            "F13": 23,
            "G13": 23,
            "H13": 23,
            "I13": 13,
            "A14": 12,
            "B14": 23,
            "C14": 23,
            "D14": 23,
            "E14": 23,
            "F14": 23,
            "G14": 23,
            "H14": 23,
            "I14": 13,
            "A15": 12,
            "B15": 23,
            "C15": 23,
            "D15": 23,
            "E15": 23,
            "F15": 23,
            "G15": 23,
            "H15": 23,
            "I15": 13,
            "A16": 12,
            "B16": 23,
            "C16": 23,
            "D16": 23,
            "E16": 23,
            "F16": 23,
            "G16": 23,
            "H16": 23,
            "I16": 13,
            "A17": 12,
            "B17": 23,
            "C17": 23,
            "D17": 23,
            "E17": 23,
            "F17": 23,
            "G17": 23,
            "H17": 23,
            "I17": 13,
            "A18": 14,
            "B18": 24,
            "C18": 24,
            "D18": 24,
            "E18": 24,
            "F18": 24,
            "G18": 24,
            "H18": 24,
            "I18": 15,
            "A19": 44,
            "B19": 44,
            "C19": 44,
            "D19": 44,
            "E19": 44,
            "F19": 44,
            "G19": 44,
            "H19": 44,
            "I19": 45,
            "B20": 16,
            "C20": 16,
            "D20": 16,
            "E20": 16,
            "F20": 16,
            "G20": 16,
            "H20": 16,
            "A21": 48,
            "B21": 48,
            "C21": 48,
            "D21": 48,
            "E21": 48,
            "F21": 48,
            "G21": 48,
            "H21": 48,
            "I21": 49
        },
        "cells": {
            "F8": { "type": "text", "mask": "dd/mm/yyyy" },
            "A12": { "type": "text", "mask": "dd/mmm/yyyy" },
            "A13": { "type": "text", "mask": "dd/mmm/yyyy" },
            "A14": { "type": "text", "mask": "dd/mmm/yyyy" },
            "A15": { "type": "text", "mask": "dd/mmm/yyyy" },
            "A16": { "type": "text", "mask": "dd/mmm/yyyy" },
            "A17": { "type": "text", "mask": "dd/mmm/yyyy" },
            "A18": { "type": "text", "mask": "dd/mmm/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 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 },
            { "height": 29 }
        ],
        "meta": {},
        "comments": {},
        "cache": {}
        }
    ],
    "style": [
        "text-align:center",
        "text-align:center;font-weight:bold",
        "text-align:center;font-weight:bold;background-color:#c62828",
        "text-align:center;font-weight:bold;background-color:#ef5350",
        "text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee",
        "text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee;font-size:x-large",
        "font-weight:bold",
        "border-bottom:1px solid black",
        "background-color:#ef5350",
        "background-color:#ef5350;color:#ffebee",
        "text-align:center;font-weight:bold;background-color:#ef9a9a;color:#ffebee;font-size:x-large",
        "background-color:#ef5350;color:#ffebee;font-weight:bold",
        "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",
        "",
        "background-color:#ffebee",
        "border-top:1px solid black;border-left:1px solid black;background-color:#ffebee",
        "border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#ffebee",
        "background-color:#ffcdd2",
        "background-color:#ffebee;font-weight:bold",
        "background-color:#ffcdd2;font-weight:bold",
        "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:#f1f8e9;color:#ffebee;font-size:x-large",
        "text-align:center;font-weight:bold;background-color:#c5e1a5;color:#ffebee;font-size:x-large",
        "text-align:center;font-weight:bold;background-color:#c5e1a5;color:#fdffff;font-size:x-large",
        "background-color:#9ccc65;color:#ffebee;font-weight:bold",
        "text-align:center;font-weight:bold;background-color:#9ccc65;color:#ffebee",
        "background-color:#66bb6a;color:#ffebee;font-weight:bold",
        "text-align:center;font-weight:bold;background-color:#66bb6a;color:#ffebee",
        "background-color:#66bb6a;color:#f7fffd;font-weight:bold",
        "text-align:center;font-weight:bold;background-color:#66bb6a;color:#f7fffd",
        "background-color:#aed581",
        "background-color:#aed581;font-weight:bold",
        "background-color:#81c784",
        "background-color:#81c784;font-weight:bold",
        "background-color:#81c784;color:#fdffff",
        "background-color:#81c784;font-weight:bold;color:#fdffff",
        "text-align:center;font-weight:bold;background-color:#ffca28;color:#fdffff;font-size:x-large",
        "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:#ffca28;color:#fdffff",
        "background-color:#ffca28;font-weight:bold;color:#fdffff",
        "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';

// Set your JSS license key (The following key only works for one day)
const license = 'NWJiODNjZTFmZmI3NDA4NzAwN2E4MTM0NTU0MjU2YWZkMzc3YjE0N2ExN2EzNjUxYzMxOGUxZDM2ODAyNTFjNTNiM2JmZDk3ZTgzZDUwOGQ3NDA4ZTdmZjQyNWNmYWYyM2M1ODJlOWUwMzdjZWU1ZTU3Y2E5ZDFiYjUwMTZmNDQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOall4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default function App() {
  const spreadsheetRef = useRef(null);

  useEffect(() => {
    jspreadsheet.setLicense(license);

    const instance = jspreadsheet(spreadsheetRef.current, {
        guid: "0fc12e95-e5ac-4c8c-9823-2c0630e6b70c",
        tabs: true,
        worksheets: [
            {
                minDimensions: [20, 100],
                tableOverflow: true,
                tableWidth: 1300,
                tableHeight: 620,
                resize: "both",
                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", "=SUM(B12:H12)", null, ""],
                    ["=A12+1", "=SUM(B13:H13)", null, ""],
                    ["=A13+1", "=SUM(B14:H14)"],
                    ["=A14+1", "=SUM(B15:H15)"],
                    ["=A15+1", "=SUM(B16:H16)"],
                    ["=A16+1", "=SUM(B17:H17)"],
                    ["=A17+1", "=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": 41,
                    "B1": 41,
                    "C1": 41,
                    "D1": 41,
                    "E1": 41,
                    "F1": 41,
                    "G1": 41,
                    "H1": 41,
                    "I1": 41,
                    "A2": 1,
                    "B2": 1,
                    "C2": 1,
                    "A3": 1,
                    "B3": 1,
                    "C3": 1,
                    "A4": 0,
                    "E4": 6,
                    "G4": 7,
                    "H4": 7,
                    "I4": 7,
                    "A6": 1,
                    "E6": 6,
                    "G6": 7,
                    "H6": 7,
                    "I6": 7,
                    "E8": 6,
                    "A11": 42,
                    "B11": 43,
                    "C11": 43,
                    "D11": 43,
                    "E11": 43,
                    "F11": 43,
                    "G11": 43,
                    "H11": 43,
                    "I11": 42,
                    "A12": 12,
                    "B12": 23,
                    "C12": 23,
                    "D12": 23,
                    "E12": 23,
                    "F12": 23,
                    "G12": 23,
                    "H12": 23,
                    "I12": 13,
                    "A13": 12,
                    "B13": 23,
                    "C13": 23,
                    "D13": 23,
                    "E13": 23,
                    "F13": 23,
                    "G13": 23,
                    "H13": 23,
                    "I13": 13,
                    "A14": 12,
                    "B14": 23,
                    "C14": 23,
                    "D14": 23,
                    "E14": 23,
                    "F14": 23,
                    "G14": 23,
                    "H14": 23,
                    "I14": 13,
                    "A15": 12,
                    "B15": 23,
                    "C15": 23,
                    "D15": 23,
                    "E15": 23,
                    "F15": 23,
                    "G15": 23,
                    "H15": 23,
                    "I15": 13,
                    "A16": 12,
                    "B16": 23,
                    "C16": 23,
                    "D16": 23,
                    "E16": 23,
                    "F16": 23,
                    "G16": 23,
                    "H16": 23,
                    "I16": 13,
                    "A17": 12,
                    "B17": 23,
                    "C17": 23,
                    "D17": 23,
                    "E17": 23,
                    "F17": 23,
                    "G17": 23,
                    "H17": 23,
                    "I17": 13,
                    "A18": 14,
                    "B18": 24,
                    "C18": 24,
                    "D18": 24,
                    "E18": 24,
                    "F18": 24,
                    "G18": 24,
                    "H18": 24,
                    "I18": 15,
                    "A19": 44,
                    "B19": 44,
                    "C19": 44,
                    "D19": 44,
                    "E19": 44,
                    "F19": 44,
                    "G19": 44,
                    "H19": 44,
                    "I19": 45,
                    "B20": 16,
                    "C20": 16,
                    "D20": 16,
                    "E20": 16,
                    "F20": 16,
                    "G20": 16,
                    "H20": 16,
                    "A21": 48,
                    "B21": 48,
                    "C21": 48,
                    "D21": 48,
                    "E21": 48,
                    "F21": 48,
                    "G21": 48,
                    "H21": 48,
                    "I21": 49
                },
                cells: {
                    "F8": { "type": "text", "mask": "dd/mm/yyyy" },
                    "A12": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A13": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A14": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A15": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A16": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A17": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A18": { "type": "text", "mask": "dd/mmm/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",
            "text-align:center;font-weight:bold;background-color:#c62828",
            "text-align:center;font-weight:bold;background-color:#ef5350",
            "text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee",
            "text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee;font-size:x-large",
            "font-weight:bold",
            "border-bottom:1px solid black",
            "background-color:#ef5350",
            "background-color:#ef5350;color:#ffebee",
            "text-align:center;font-weight:bold;background-color:#ef9a9a;color:#ffebee;font-size:x-large",
            "background-color:#ef5350;color:#ffebee;font-weight:bold",
            "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",
            "",
            "background-color:#ffebee",
            "border-top:1px solid black;border-left:1px solid black;background-color:#ffebee",
            "border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#ffebee",
            "background-color:#ffcdd2",
            "background-color:#ffebee;font-weight:bold",
            "background-color:#ffcdd2;font-weight:bold",
            "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:#f1f8e9;color:#ffebee;font-size:x-large",
            "text-align:center;font-weight:bold;background-color:#c5e1a5;color:#ffebee;font-size:x-large",
            "text-align:center;font-weight:bold;background-color:#c5e1a5;color:#fdffff;font-size:x-large",
            "background-color:#9ccc65;color:#ffebee;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#9ccc65;color:#ffebee",
            "background-color:#66bb6a;color:#ffebee;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#66bb6a;color:#ffebee",
            "background-color:#66bb6a;color:#f7fffd;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#66bb6a;color:#f7fffd",
            "background-color:#aed581",
            "background-color:#aed581;font-weight:bold",
            "background-color:#81c784",
            "background-color:#81c784;font-weight:bold",
            "background-color:#81c784;color:#fdffff",
            "background-color:#81c784;font-weight:bold;color:#fdffff",
            "text-align:center;font-weight:bold;background-color:#ffca28;color:#fdffff;font-size:x-large",
            "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:#ffca28;color:#fdffff",
            "background-color:#ffca28;font-weight:bold;color:#fdffff",
            "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"
    :worksheets="worksheets"
    :styles="globalStyle"
    toolbar="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: 'NWJiODNjZTFmZmI3NDA4NzAwN2E4MTM0NTU0MjU2YWZkMzc3YjE0N2ExN2EzNjUxYzMxOGUxZDM2ODAyNTFjNTNiM2JmZDk3ZTgzZDUwOGQ3NDA4ZTdmZjQyNWNmYWYyM2M1ODJlOWUwMzdjZWU1ZTU3Y2E5ZDFiYjUwMTZmNDQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOall4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
        tabs: true,
        worksheets: [
            {
                minDimensions: [20, 100],
                tableOverflow: true,
                tableWidth: 1300,
                tableHeight: 620,
                resize: "both",
                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", "=SUM(B12:H12)", null, ""],
                    ["=A12+1", "=SUM(B13:H13)", null, ""],
                    ["=A13+1", "=SUM(B14:H14)"],
                    ["=A14+1", "=SUM(B15:H15)"],
                    ["=A15+1", "=SUM(B16:H16)"],
                    ["=A16+1", "=SUM(B17:H17)"],
                    ["=A17+1", "=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": 41,
                    "B1": 41,
                    "C1": 41,
                    "D1": 41,
                    "E1": 41,
                    "F1": 41,
                    "G1": 41,
                    "H1": 41,
                    "I1": 41,
                    "A2": 1,
                    "B2": 1,
                    "C2": 1,
                    "A3": 1,
                    "B3": 1,
                    "C3": 1,
                    "A4": 0,
                    "E4": 6,
                    "G4": 7,
                    "H4": 7,
                    "I4": 7,
                    "A6": 1,
                    "E6": 6,
                    "G6": 7,
                    "H6": 7,
                    "I6": 7,
                    "E8": 6,
                    "A11": 42,
                    "B11": 43,
                    "C11": 43,
                    "D11": 43,
                    "E11": 43,
                    "F11": 43,
                    "G11": 43,
                    "H11": 43,
                    "I11": 42,
                    "A12": 12,
                    "B12": 23,
                    "C12": 23,
                    "D12": 23,
                    "E12": 23,
                    "F12": 23,
                    "G12": 23,
                    "H12": 23,
                    "I12": 13,
                    "A13": 12,
                    "B13": 23,
                    "C13": 23,
                    "D13": 23,
                    "E13": 23,
                    "F13": 23,
                    "G13": 23,
                    "H13": 23,
                    "I13": 13,
                    "A14": 12,
                    "B14": 23,
                    "C14": 23,
                    "D14": 23,
                    "E14": 23,
                    "F14": 23,
                    "G14": 23,
                    "H14": 23,
                    "I14": 13,
                    "A15": 12,
                    "B15": 23,
                    "C15": 23,
                    "D15": 23,
                    "E15": 23,
                    "F15": 23,
                    "G15": 23,
                    "H15": 23,
                    "I15": 13,
                    "A16": 12,
                    "B16": 23,
                    "C16": 23,
                    "D16": 23,
                    "E16": 23,
                    "F16": 23,
                    "G16": 23,
                    "H16": 23,
                    "I16": 13,
                    "A17": 12,
                    "B17": 23,
                    "C17": 23,
                    "D17": 23,
                    "E17": 23,
                    "F17": 23,
                    "G17": 23,
                    "H17": 23,
                    "I17": 13,
                    "A18": 14,
                    "B18": 24,
                    "C18": 24,
                    "D18": 24,
                    "E18": 24,
                    "F18": 24,
                    "G18": 24,
                    "H18": 24,
                    "I18": 15,
                    "A19": 44,
                    "B19": 44,
                    "C19": 44,
                    "D19": 44,
                    "E19": 44,
                    "F19": 44,
                    "G19": 44,
                    "H19": 44,
                    "I19": 45,
                    "B20": 16,
                    "C20": 16,
                    "D20": 16,
                    "E20": 16,
                    "F20": 16,
                    "G20": 16,
                    "H20": 16,
                    "A21": 48,
                    "B21": 48,
                    "C21": 48,
                    "D21": 48,
                    "E21": 48,
                    "F21": 48,
                    "G21": 48,
                    "H21": 48,
                    "I21": 49
                },
                cells: {
                    "F8": { "type": "text", "mask": "dd/mm/yyyy" },
                    "A12": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A13": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A14": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A15": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A16": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A17": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A18": { "type": "text", "mask": "dd/mmm/yyyy" }
                },
                mergeCells: {
                    "A1": [9, 1],
                    "A2": [3, 2],
                    "A4": [2, 1],
                    "E4": [2, 1],
                    "E6": [2, 1]
                }
            }
        ],
        autoId: true,
        globalStyle: [
            "text-align:center",
            "text-align:center;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#c62828",
            "text-align:center;font-weight:bold;background-color:#ef5350",
            "text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee",
            "text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee;font-size:x-large",
            "font-weight:bold",
            "border-bottom:1px solid black",
            "background-color:#ef5350",
            "background-color:#ef5350;color:#ffebee",
            "text-align:center;font-weight:bold;background-color:#ef9a9a;color:#ffebee;font-size:x-large",
            "background-color:#ef5350;color:#ffebee;font-weight:bold",
            "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",
            "",
            "background-color:#ffebee",
            "border-top:1px solid black;border-left:1px solid black;background-color:#ffebee",
            "border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#ffebee",
            "background-color:#ffcdd2",
            "background-color:#ffebee;font-weight:bold",
            "background-color:#ffcdd2;font-weight:bold",
            "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:#f1f8e9;color:#ffebee;font-size:x-large",
            "text-align:center;font-weight:bold;background-color:#c5e1a5;color:#ffebee;font-size:x-large",
            "text-align:center;font-weight:bold;background-color:#c5e1a5;color:#fdffff;font-size:x-large",
            "background-color:#9ccc65;color:#ffebee;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#9ccc65;color:#ffebee",
            "background-color:#66bb6a;color:#ffebee;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#66bb6a;color:#ffebee",
            "background-color:#66bb6a;color:#f7fffd;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#66bb6a;color:#f7fffd",
            "background-color:#aed581",
            "background-color:#aed581;font-weight:bold",
            "background-color:#81c784",
            "background-color:#81c784;font-weight:bold",
            "background-color:#81c784;color:#fdffff",
            "background-color:#81c784;font-weight:bold;color:#fdffff",
            "text-align:center;font-weight:bold;background-color:#ffca28;color:#fdffff;font-size:x-large",
            "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:#ffca28;color:#fdffff",
            "background-color:#ffca28;font-weight:bold;color:#fdffff",
            "background-color:#ffd54f;color:#fdffff",
            "background-color:#ffd54f;font-weight:bold;color:#fdffff"
        ],
        toolbar: true
    };
  },
};
</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('NWJiODNjZTFmZmI3NDA4NzAwN2E4MTM0NTU0MjU2YWZkMzc3YjE0N2ExN2EzNjUxYzMxOGUxZDM2ODAyNTFjNTNiM2JmZDk3ZTgzZDUwOGQ3NDA4ZTdmZjQyNWNmYWYyM2M1ODJlOWUwMzdjZWU1ZTU3Y2E5ZDFiYjUwMTZmNDQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOall4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@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,
        worksheets: [
            {
                minDimensions: [20, 100],
                tableOverflow: true,
                tableWidth: 1300,
                tableHeight: 620,
                resize: "both",
                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", "=SUM(B12:H12)", null, ""],
                    ["=A12+1", "=SUM(B13:H13)", null, ""],
                    ["=A13+1", "=SUM(B14:H14)"],
                    ["=A14+1", "=SUM(B15:H15)"],
                    ["=A15+1", "=SUM(B16:H16)"],
                    ["=A16+1", "=SUM(B17:H17)"],
                    ["=A17+1", "=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": 41,
                    "B1": 41,
                    "C1": 41,
                    "D1": 41,
                    "E1": 41,
                    "F1": 41,
                    "G1": 41,
                    "H1": 41,
                    "I1": 41,
                    "A2": 1,
                    "B2": 1,
                    "C2": 1,
                    "A3": 1,
                    "B3": 1,
                    "C3": 1,
                    "A4": 0,
                    "E4": 6,
                    "G4": 7,
                    "H4": 7,
                    "I4": 7,
                    "A6": 1,
                    "E6": 6,
                    "G6": 7,
                    "H6": 7,
                    "I6": 7,
                    "E8": 6,
                    "A11": 42,
                    "B11": 43,
                    "C11": 43,
                    "D11": 43,
                    "E11": 43,
                    "F11": 43,
                    "G11": 43,
                    "H11": 43,
                    "I11": 42,
                    "A12": 12,
                    "B12": 23,
                    "C12": 23,
                    "D12": 23,
                    "E12": 23,
                    "F12": 23,
                    "G12": 23,
                    "H12": 23,
                    "I12": 13,
                    "A13": 12,
                    "B13": 23,
                    "C13": 23,
                    "D13": 23,
                    "E13": 23,
                    "F13": 23,
                    "G13": 23,
                    "H13": 23,
                    "I13": 13,
                    "A14": 12,
                    "B14": 23,
                    "C14": 23,
                    "D14": 23,
                    "E14": 23,
                    "F14": 23,
                    "G14": 23,
                    "H14": 23,
                    "I14": 13,
                    "A15": 12,
                    "B15": 23,
                    "C15": 23,
                    "D15": 23,
                    "E15": 23,
                    "F15": 23,
                    "G15": 23,
                    "H15": 23,
                    "I15": 13,
                    "A16": 12,
                    "B16": 23,
                    "C16": 23,
                    "D16": 23,
                    "E16": 23,
                    "F16": 23,
                    "G16": 23,
                    "H16": 23,
                    "I16": 13,
                    "A17": 12,
                    "B17": 23,
                    "C17": 23,
                    "D17": 23,
                    "E17": 23,
                    "F17": 23,
                    "G17": 23,
                    "H17": 23,
                    "I17": 13,
                    "A18": 14,
                    "B18": 24,
                    "C18": 24,
                    "D18": 24,
                    "E18": 24,
                    "F18": 24,
                    "G18": 24,
                    "H18": 24,
                    "I18": 15,
                    "A19": 44,
                    "B19": 44,
                    "C19": 44,
                    "D19": 44,
                    "E19": 44,
                    "F19": 44,
                    "G19": 44,
                    "H19": 44,
                    "I19": 45,
                    "B20": 16,
                    "C20": 16,
                    "D20": 16,
                    "E20": 16,
                    "F20": 16,
                    "G20": 16,
                    "H20": 16,
                    "A21": 48,
                    "B21": 48,
                    "C21": 48,
                    "D21": 48,
                    "E21": 48,
                    "F21": 48,
                    "G21": 48,
                    "H21": 48,
                    "I21": 49
                },
                cells: {
                    "F8": { "type": "text", "mask": "dd/mm/yyyy" },
                    "A12": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A13": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A14": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A15": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A16": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A17": { "type": "text", "mask": "dd/mmm/yyyy" },
                    "A18": { "type": "text", "mask": "dd/mmm/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",
            "text-align:center;font-weight:bold;background-color:#c62828",
            "text-align:center;font-weight:bold;background-color:#ef5350",
            "text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee",
            "text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee;font-size:x-large",
            "font-weight:bold",
            "border-bottom:1px solid black",
            "background-color:#ef5350",
            "background-color:#ef5350;color:#ffebee",
            "text-align:center;font-weight:bold;background-color:#ef9a9a;color:#ffebee;font-size:x-large",
            "background-color:#ef5350;color:#ffebee;font-weight:bold",
            "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",
            "",
            "background-color:#ffebee",
            "border-top:1px solid black;border-left:1px solid black;background-color:#ffebee",
            "border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#ffebee",
            "background-color:#ffcdd2",
            "background-color:#ffebee;font-weight:bold",
            "background-color:#ffcdd2;font-weight:bold",
            "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:#f1f8e9;color:#ffebee;font-size:x-large",
            "text-align:center;font-weight:bold;background-color:#c5e1a5;color:#ffebee;font-size:x-large",
            "text-align:center;font-weight:bold;background-color:#c5e1a5;color:#fdffff;font-size:x-large",
            "background-color:#9ccc65;color:#ffebee;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#9ccc65;color:#ffebee",
            "background-color:#66bb6a;color:#ffebee;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#66bb6a;color:#ffebee",
            "background-color:#66bb6a;color:#f7fffd;font-weight:bold",
            "text-align:center;font-weight:bold;background-color:#66bb6a;color:#f7fffd",
            "background-color:#aed581",
            "background-color:#aed581;font-weight:bold",
            "background-color:#81c784",
            "background-color:#81c784;font-weight:bold",
            "background-color:#81c784;color:#fdffff",
            "background-color:#81c784;font-weight:bold;color:#fdffff",
            "text-align:center;font-weight:bold;background-color:#ffca28;color:#fdffff;font-size:x-large",
            "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:#ffca28;color:#fdffff",
            "background-color:#ffca28;font-weight:bold;color:#fdffff",
            "background-color:#ffd54f;color:#fdffff",
            "background-color:#ffd54f;font-weight:bold;color:#fdffff"
        ],
        toolbar: true
    });
  }
}