Products

Calendar

A basic calendar grid built using a JavaScript spreadsheet component. This demo highlights date visualisation in a flexible, editable layout that can be extended for scheduling tools, bookings, or availability trackers in web applications.


<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" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>

<div id="spreadsheet"></div>

<script>
jspreadsheet.setLicense('NWU0NDJjMDlhYWFkMzY5MGM5Y2ZhNjQ4MWNkOGI1NmIyZDdkZGNlNzJmMmQxMjhmYzdlMzhmMGYyYjM5ZTE4MTdmM2QxZTM1NjU4MDNkYzM0MGE2MWU3MTZmY2E4NzJlOGU2ODRhMWI1MmI5NDg2NTM4OTM0YTQyOGYxYzQ0MjEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

jspreadsheet.setExtensions({ formula });

jspreadsheet(document.getElementById('spreadsheet'), {
    "tabs": true,
    "toolbar": true,
    "worksheets": [
        {
            "minDimensions": [15, 15],
            "worksheetName": "Sheet1",
            "tableOverflow": true,
            "tableWidth": 1300,
            "tableHeight": 620,
            "resize": "both",
            "textOverflow": true,
            "defaultColAlign": "left",
            "defaultColWidth": "50px",
            "freezeRowControl": true,
            "freezeColumnControl": true,
            "data": [
                ["", "", "", "", null, null, null, null, null, null, null, null],
                ["", "", "", "", "YourCompany", "", "", "Year", 2025, "Month", 4, null],
                ["", "", "", "", "", "", "", "", "", "", "", ""],
                ["", "", "", "", "=DATE(I2,K2,1)", "", "", "", "", "", "", null],
                [
                    "",
                    "",
                    "",
                    "",
                    "=CHOOSE(WEEKDAY(L6,1),\"Su\",\"M\",\"Tu\",\"W\",\"Th\",\"F\",\"Sa\")",
                    "M",
                    "Tu",
                    "W",
                    "Th",
                    "F",
                    "Sa",
                    null
                ],
                [
                    "",
                    "",
                    "",
                    "",
                    "=E4-(WEEKDAY(E4,1))-IF((WEEKDAY(E4,1))<=0,7,0)+1",
                    "=E6+1",
                    "=F6+1",
                    "=G6+1",
                    "=H6+1",
                    "=I6+1",
                    "=J6+1",
                    null
                ],
                [
                    "",
                    "",
                    "",
                    "",
                    "=K6+1",
                    "=E7+1",
                    "=F7+1",
                    "=G7+1",
                    "=H7+1",
                    "=I7+1",
                    "=J7+1",
                    null
                ],
                [
                    "",
                    "",
                    "",
                    "",
                    "=K7+1",
                    "=E8+1",
                    "=F8+1",
                    "=G8+1",
                    "=H8+1",
                    "=I8+1",
                    "=J8+1",
                    null
                ],
                [
                    "",
                    "",
                    "",
                    "",
                    "=K8+1",
                    "=E9+1",
                    "=F9+1",
                    "=G9+1",
                    "=H9+1",
                    "=I9+1",
                    "=J9+1",
                    null
                ],
                [
                    "",
                    "",
                    "",
                    "",
                    "=K9+1",
                    "=E10+1",
                    "=F10+1",
                    "=G10+1",
                    "=H10+1",
                    "=I10+1",
                    "=J10+1",
                    null
                ],
                [
                    "",
                    "",
                    "",
                    "",
                    "=K10+1",
                    "=E11+1",
                    "=F11+1",
                    "=G11+1",
                    "=H11+1",
                    "=I11+1",
                    "=J11+1",
                    null
                ],
                null
            ],
            "style": {
                "E2": 4,
                "F2": 4,
                "G2": 4,
                "H2": 1,
                "I2": 0,
                "J2": 1,
                "K2": 0,
                "E4": 3,
                "F4": 3,
                "G4": 3,
                "H4": 3,
                "I4": 3,
                "J4": 3,
                "K4": 3,
                "E5": 16,
                "F5": 16,
                "G5": 16,
                "H5": 16,
                "I5": 16,
                "J5": 16,
                "K5": 17,
                "E6": 8,
                "F6": 8,
                "G6": 8,
                "H6": 8,
                "I6": 8,
                "J6": 8,
                "K6": 9,
                "E7": 8,
                "F7": 8,
                "G7": 8,
                "H7": 8,
                "I7": 8,
                "J7": 8,
                "K7": 9,
                "E8": 8,
                "F8": 8,
                "G8": 8,
                "H8": 8,
                "I8": 8,
                "J8": 8,
                "K8": 9,
                "E9": 8,
                "F9": 8,
                "G9": 8,
                "H9": 8,
                "I9": 8,
                "J9": 8,
                "K9": 9,
                "E10": 8,
                "F10": 8,
                "G10": 8,
                "H10": 8,
                "I10": 8,
                "J10": 8,
                "K10": 9,
                "E11": 10,
                "F11": 10,
                "G11": 10,
                "H11": 10,
                "I11": 10,
                "J11": 10,
                "K11": 11
            },
            "cells": {
                "E4": { "mask": "mmmm YYYY" },
                "E6": { "mask": "dd" },
                "F6": { "mask": "dd" },
                "G6": { "mask": "dd" },
                "H6": { "mask": "dd" },
                "I6": { "mask": "dd" },
                "J6": { "mask": "dd" },
                "K6": { "mask": "dd" },
                "E7": { "mask": "dd" },
                "F7": { "mask": "dd" },
                "G7": { "mask": "dd" },
                "H7": { "mask": "dd" },
                "I7": { "mask": "dd" },
                "J7": { "mask": "dd" },
                "K7": { "mask": "dd" },
                "E8": { "mask": "dd" },
                "F8": { "mask": "dd" },
                "G8": { "mask": "dd" },
                "H8": { "mask": "dd" },
                "I8": { "mask": "dd" },
                "J8": { "mask": "dd" },
                "K8": { "mask": "dd" },
                "E9": { "mask": "dd" },
                "F9": { "mask": "dd" },
                "G9": { "mask": "dd" },
                "H9": { "mask": "dd" },
                "I9": { "mask": "dd" },
                "J9": { "mask": "dd" },
                "K9": { "mask": "dd" },
                "E10": { "mask": "dd" },
                "F10": { "mask": "dd" },
                "G10": { "mask": "dd" },
                "H10": { "mask": "dd" },
                "I10": { "mask": "dd" },
                "J10": { "mask": "dd" },
                "K10": { "mask": "dd" },
                "E11": { "mask": "dd" },
                "F11": { "mask": "dd" },
                "G11": { "mask": "dd" },
                "H11": { "mask": "dd" },
                "I11": { "mask": "dd" },
                "J11": { "mask": "dd" },
                "K11": { "mask": "dd" }
            },
            "mergeCells": { "E2": [3, 1], "E4": [7, 1] }
        }
    ],
    "style": [
        "text-align:center",
        "text-align:center;font-weight:bold",
        "text-align:center;background-color:#b71c1c",
        "text-align:center;background-color:#b71c1c;color:#ffebee",
        "text-align:center;font-weight:bold;font-size:medium",
        "text-align:center;font-weight:bold;background-color:#e53935",
        "text-align:center;font-weight:bold;background-color:#ef5350",
        "text-align:center;font-weight:bold;background-color:#ffcdd2",
        "text-align:center;border-top:1px solid black;border-left:1px solid black",
        "text-align:center;border-top:1px solid black;border-right: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;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
        "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ef9a9a;border-bottom:1px solid #ef9a9a;border-left:1px solid #ef9a9a",
        "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ef9a9a;border-right:1px solid #ef9a9a;border-bottom:1px solid #ef9a9a;border-left:1px solid #ef9a9a",
        "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
        "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-right:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
        "text-align:left;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
        "text-align:left;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-right:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2"
    ]
}); 
</script>
import React, { useEffect ,useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import formula from "@jspreadsheet/formula-pro";

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import './App.css';

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

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

  useEffect(() => {
    jspreadsheet.setLicense(license);
    jspreadsheet.setExtensions({ formula });

    const instance = jspreadsheet(spreadsheetRef.current, {
        tabs: true,
        worksheets: [
            {
            minDimensions: [15, 15],
            worksheetName: "Sheet1",
            tableOverflow: true,
            tableWidth: 1300,
            tableHeight: 620,
            resize: "both",
            textOverflow: true,
            defaultColAlign: "left",
            freezeRowControl: true,
            freezeColumnControl: true,
            worksheetId: "57e85e4c-49b6-4dfa-a88e-1b1535c93de8",
            data: [
                ["", "", "", "", null, null, null, null, null, null, null, null],
                ["", "", "", "", "YourCompany", "", "", "Year", 2025, "Month", 4, null],
                ["", "", "", "", "", "", "", "", "", "", "", ""],
                ["", "", "", "", "=DATE(I2,K2,1)", "", "", "", "", "", "", null],
                [
                "",
                "",
                "",
                "",
                "=CHOOSE(WEEKDAY(L6,1),\"Su\",\"M\",\"Tu\",\"W\",\"Th\",\"F\",\"Sa\")",
                "M",
                "Tu",
                "W",
                "Th",
                "F",
                "Sa",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=E4-(WEEKDAY(E4,1))-IF((WEEKDAY(E4,1))<=0,7,0)+1",
                "=E6+1",
                "=F6+1",
                "=G6+1",
                "=H6+1",
                "=I6+1",
                "=J6+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K6+1",
                "=E7+1",
                "=F7+1",
                "=G7+1",
                "=H7+1",
                "=I7+1",
                "=J7+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K7+1",
                "=E8+1",
                "=F8+1",
                "=G8+1",
                "=H8+1",
                "=I8+1",
                "=J8+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K8+1",
                "=E9+1",
                "=F9+1",
                "=G9+1",
                "=H9+1",
                "=I9+1",
                "=J9+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K9+1",
                "=E10+1",
                "=F10+1",
                "=G10+1",
                "=H10+1",
                "=I10+1",
                "=J10+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K10+1",
                "=E11+1",
                "=F11+1",
                "=G11+1",
                "=H11+1",
                "=I11+1",
                "=J11+1",
                null
                ],
                null
            ],
            columns: [
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" }
            ],
            rows: [
                { "height": 29 },
                { "height": 53 },
                { "height": 29 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 53 },
                { "id": null, "height": 29 },
                { "id": null, "height": 29 },
                { "id": null, "height": 29 }
            ],
            meta: {},
            style: {
                "E2": 4,
                "F2": 4,
                "G2": 4,
                "H2": 1,
                "I2": 0,
                "J2": 1,
                "K2": 0,
                "E4": 3,
                "F4": 3,
                "G4": 3,
                "H4": 3,
                "I4": 3,
                "J4": 3,
                "K4": 3,
                "E5": 16,
                "F5": 16,
                "G5": 16,
                "H5": 16,
                "I5": 16,
                "J5": 16,
                "K5": 17,
                "E6": 8,
                "F6": 8,
                "G6": 8,
                "H6": 8,
                "I6": 8,
                "J6": 8,
                "K6": 9,
                "E7": 8,
                "F7": 8,
                "G7": 8,
                "H7": 8,
                "I7": 8,
                "J7": 8,
                "K7": 9,
                "E8": 8,
                "F8": 8,
                "G8": 8,
                "H8": 8,
                "I8": 8,
                "J8": 8,
                "K8": 9,
                "E9": 8,
                "F9": 8,
                "G9": 8,
                "H9": 8,
                "I9": 8,
                "J9": 8,
                "K9": 9,
                "E10": 8,
                "F10": 8,
                "G10": 8,
                "H10": 8,
                "I10": 8,
                "J10": 8,
                "K10": 9,
                "E11": 10,
                "F11": 10,
                "G11": 10,
                "H11": 10,
                "I11": 10,
                "J11": 10,
                "K11": 11
            },
            comments: {},
            cells: {
                "E4": { "mask": "mmmm YYYY" },
                "E6": { "mask": "dd" },
                "F6": { "mask": "dd" },
                "G6": { "mask": "dd" },
                "H6": { "mask": "dd" },
                "I6": { "mask": "dd" },
                "J6": { "mask": "dd" },
                "K6": { "mask": "dd" },
                "E7": { "mask": "dd" },
                "F7": { "mask": "dd" },
                "G7": { "mask": "dd" },
                "H7": { "mask": "dd" },
                "I7": { "mask": "dd" },
                "J7": { "mask": "dd" },
                "K7": { "mask": "dd" },
                "E8": { "mask": "dd" },
                "F8": { "mask": "dd" },
                "G8": { "mask": "dd" },
                "H8": { "mask": "dd" },
                "I8": { "mask": "dd" },
                "J8": { "mask": "dd" },
                "K8": { "mask": "dd" },
                "E9": { "mask": "dd" },
                "F9": { "mask": "dd" },
                "G9": { "mask": "dd" },
                "H9": { "mask": "dd" },
                "I9": { "mask": "dd" },
                "J9": { "mask": "dd" },
                "K9": { "mask": "dd" },
                "E10": { "mask": "dd" },
                "F10": { "mask": "dd" },
                "G10": { "mask": "dd" },
                "H10": { "mask": "dd" },
                "I10": { "mask": "dd" },
                "J10": { "mask": "dd" },
                "K10": { "mask": "dd" },
                "E11": { "mask": "dd" },
                "F11": { "mask": "dd" },
                "G11": { "mask": "dd" },
                "H11": { "mask": "dd" },
                "I11": { "mask": "dd" },
                "J11": { "mask": "dd" },
                "K11": { "mask": "dd" }
            },
            cache: {},
            mergeCells: { "E2": [3, 1], "E4": [7, 1] }
            }
        ],
        namespace: "6618d602-82d3-402a-83e2-f5bbc1f761b2",
        version: "d88ae7f0-0cf5-4457-9353-583c70f8f9e6",
        style: [
            "text-align:center",
            "text-align:center;font-weight:bold",
            "text-align:center;background-color:#b71c1c",
            "text-align:center;background-color:#b71c1c;color:#ffebee",
            "text-align:center;font-weight:bold;font-size:medium",
            "text-align:center;font-weight:bold;background-color:#e53935",
            "text-align:center;font-weight:bold;background-color:#ef5350",
            "text-align:center;font-weight:bold;background-color:#ffcdd2",
            "text-align:center;border-top:1px solid black;border-left:1px solid black",
            "text-align:center;border-top:1px solid black;border-right: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;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ef9a9a;border-bottom:1px solid #ef9a9a;border-left:1px solid #ef9a9a",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ef9a9a;border-right:1px solid #ef9a9a;border-bottom:1px solid #ef9a9a;border-left:1px solid #ef9a9a",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-right:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:left;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:left;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-right:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2"
        ],
        toolbar: true
    });

    return () => {
      instance?.destroy?.();
    };
  }, []);

  return <div ref={spreadsheetRef}></div>;
}
<template>
  <Spreadsheet
    ref="spreadsheet"
    :license="license"
    :worksheets="worksheets"
    :styles="globalStyle"
    toolbar="true">
  </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import formula from "@jspreadsheet/formula-pro";

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense('NWU0NDJjMDlhYWFkMzY5MGM5Y2ZhNjQ4MWNkOGI1NmIyZDdkZGNlNzJmMmQxMjhmYzdlMzhmMGYyYjM5ZTE4MTdmM2QxZTM1NjU4MDNkYzM0MGE2MWU3MTZmY2E4NzJlOGU2ODRhMWI1MmI5NDg2NTM4OTM0YTQyOGYxYzQ0MjEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet.setExtensions({ formula });

export default {
  components: { Spreadsheet, Worksheet },
  data() {
    return {
      // Set your JSS license key (The following key only works for one day)
        license: 'NWU0NDJjMDlhYWFkMzY5MGM5Y2ZhNjQ4MWNkOGI1NmIyZDdkZGNlNzJmMmQxMjhmYzdlMzhmMGYyYjM5ZTE4MTdmM2QxZTM1NjU4MDNkYzM0MGE2MWU3MTZmY2E4NzJlOGU2ODRhMWI1MmI5NDg2NTM4OTM0YTQyOGYxYzQ0MjEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
        tabs: true,
        worksheets: [
            {
            minDimensions: [15, 15],
            worksheetName: "Sheet1",
            tableOverflow: true,
            tableWidth: 1300,
            tableHeight: 620,
            resize: "both",
            textOverflow: true,
            defaultColAlign: "left",
            freezeRowControl: true,
            freezeColumnControl: true,
            worksheetId: "57e85e4c-49b6-4dfa-a88e-1b1535c93de8",
            data: [
                ["", "", "", "", null, null, null, null, null, null, null, null],
                ["", "", "", "", "YourCompany", "", "", "Year", 2025, "Month", 4, null],
                ["", "", "", "", "", "", "", "", "", "", "", ""],
                ["", "", "", "", "=DATE(I2,K2,1)", "", "", "", "", "", "", null],
                [
                "",
                "",
                "",
                "",
                "=CHOOSE(WEEKDAY(L6,1),\"Su\",\"M\",\"Tu\",\"W\",\"Th\",\"F\",\"Sa\")",
                "M",
                "Tu",
                "W",
                "Th",
                "F",
                "Sa",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=E4-(WEEKDAY(E4,1))-IF((WEEKDAY(E4,1))<=0,7,0)+1",
                "=E6+1",
                "=F6+1",
                "=G6+1",
                "=H6+1",
                "=I6+1",
                "=J6+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K6+1",
                "=E7+1",
                "=F7+1",
                "=G7+1",
                "=H7+1",
                "=I7+1",
                "=J7+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K7+1",
                "=E8+1",
                "=F8+1",
                "=G8+1",
                "=H8+1",
                "=I8+1",
                "=J8+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K8+1",
                "=E9+1",
                "=F9+1",
                "=G9+1",
                "=H9+1",
                "=I9+1",
                "=J9+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K9+1",
                "=E10+1",
                "=F10+1",
                "=G10+1",
                "=H10+1",
                "=I10+1",
                "=J10+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K10+1",
                "=E11+1",
                "=F11+1",
                "=G11+1",
                "=H11+1",
                "=I11+1",
                "=J11+1",
                null
                ],
                null
            ],
            columns: [
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" }
            ],
            rows: [
                { "height": 29 },
                { "height": 53 },
                { "height": 29 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 53 },
                { "id": null, "height": 29 },
                { "id": null, "height": 29 },
                { "id": null, "height": 29 }
            ],
            meta: {},
            style: {
                "E2": 4,
                "F2": 4,
                "G2": 4,
                "H2": 1,
                "I2": 0,
                "J2": 1,
                "K2": 0,
                "E4": 3,
                "F4": 3,
                "G4": 3,
                "H4": 3,
                "I4": 3,
                "J4": 3,
                "K4": 3,
                "E5": 16,
                "F5": 16,
                "G5": 16,
                "H5": 16,
                "I5": 16,
                "J5": 16,
                "K5": 17,
                "E6": 8,
                "F6": 8,
                "G6": 8,
                "H6": 8,
                "I6": 8,
                "J6": 8,
                "K6": 9,
                "E7": 8,
                "F7": 8,
                "G7": 8,
                "H7": 8,
                "I7": 8,
                "J7": 8,
                "K7": 9,
                "E8": 8,
                "F8": 8,
                "G8": 8,
                "H8": 8,
                "I8": 8,
                "J8": 8,
                "K8": 9,
                "E9": 8,
                "F9": 8,
                "G9": 8,
                "H9": 8,
                "I9": 8,
                "J9": 8,
                "K9": 9,
                "E10": 8,
                "F10": 8,
                "G10": 8,
                "H10": 8,
                "I10": 8,
                "J10": 8,
                "K10": 9,
                "E11": 10,
                "F11": 10,
                "G11": 10,
                "H11": 10,
                "I11": 10,
                "J11": 10,
                "K11": 11
            },
            comments: {},
            cells: {
                "E4": { "mask": "mmmm YYYY" },
                "E6": { "mask": "dd" },
                "F6": { "mask": "dd" },
                "G6": { "mask": "dd" },
                "H6": { "mask": "dd" },
                "I6": { "mask": "dd" },
                "J6": { "mask": "dd" },
                "K6": { "mask": "dd" },
                "E7": { "mask": "dd" },
                "F7": { "mask": "dd" },
                "G7": { "mask": "dd" },
                "H7": { "mask": "dd" },
                "I7": { "mask": "dd" },
                "J7": { "mask": "dd" },
                "K7": { "mask": "dd" },
                "E8": { "mask": "dd" },
                "F8": { "mask": "dd" },
                "G8": { "mask": "dd" },
                "H8": { "mask": "dd" },
                "I8": { "mask": "dd" },
                "J8": { "mask": "dd" },
                "K8": { "mask": "dd" },
                "E9": { "mask": "dd" },
                "F9": { "mask": "dd" },
                "G9": { "mask": "dd" },
                "H9": { "mask": "dd" },
                "I9": { "mask": "dd" },
                "J9": { "mask": "dd" },
                "K9": { "mask": "dd" },
                "E10": { "mask": "dd" },
                "F10": { "mask": "dd" },
                "G10": { "mask": "dd" },
                "H10": { "mask": "dd" },
                "I10": { "mask": "dd" },
                "J10": { "mask": "dd" },
                "K10": { "mask": "dd" },
                "E11": { "mask": "dd" },
                "F11": { "mask": "dd" },
                "G11": { "mask": "dd" },
                "H11": { "mask": "dd" },
                "I11": { "mask": "dd" },
                "J11": { "mask": "dd" },
                "K11": { "mask": "dd" }
            },
            cache: {},
            mergeCells: { "E2": [3, 1], "E4": [7, 1] }
            }
        ],
        namespace: "6618d602-82d3-402a-83e2-f5bbc1f761b2",
        version: "d88ae7f0-0cf5-4457-9353-583c70f8f9e6",
        globalStyle: [
            "text-align:center",
            "text-align:center;font-weight:bold",
            "text-align:center;background-color:#b71c1c",
            "text-align:center;background-color:#b71c1c;color:#ffebee",
            "text-align:center;font-weight:bold;font-size:medium",
            "text-align:center;font-weight:bold;background-color:#e53935",
            "text-align:center;font-weight:bold;background-color:#ef5350",
            "text-align:center;font-weight:bold;background-color:#ffcdd2",
            "text-align:center;border-top:1px solid black;border-left:1px solid black",
            "text-align:center;border-top:1px solid black;border-right: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;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ef9a9a;border-bottom:1px solid #ef9a9a;border-left:1px solid #ef9a9a",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ef9a9a;border-right:1px solid #ef9a9a;border-bottom:1px solid #ef9a9a;border-left:1px solid #ef9a9a",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-right:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:left;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:left;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-right:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2"
        ],
        toolbar: true
    };
  },
};
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NWU0NDJjMDlhYWFkMzY5MGM5Y2ZhNjQ4MWNkOGI1NmIyZDdkZGNlNzJmMmQxMjhmYzdlMzhmMGYyYjM5ZTE4MTdmM2QxZTM1NjU4MDNkYzM0MGE2MWU3MTZmY2E4NzJlOGU2ODRhMWI1MmI5NDg2NTM4OTM0YTQyOGYxYzQ0MjEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalU1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

jspreadsheet.setExtensions({ formula });

@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: [15, 15],
            worksheetName: "Sheet1",
            tableOverflow: true,
            tableWidth: 1300,
            tableHeight: 620,
            resize: "both",
            textOverflow: true,
            defaultColAlign: "left",
            freezeRowControl: true,
            freezeColumnControl: true,
            worksheetId: "57e85e4c-49b6-4dfa-a88e-1b1535c93de8",
            data: [
                ["", "", "", "", null, null, null, null, null, null, null, null],
                ["", "", "", "", "YourCompany", "", "", "Year", 2025, "Month", 4, null],
                ["", "", "", "", "", "", "", "", "", "", "", ""],
                ["", "", "", "", "=DATE(I2,K2,1)", "", "", "", "", "", "", null],
                [
                "",
                "",
                "",
                "",
                "=CHOOSE(WEEKDAY(L6,1),\"Su\",\"M\",\"Tu\",\"W\",\"Th\",\"F\",\"Sa\")",
                "M",
                "Tu",
                "W",
                "Th",
                "F",
                "Sa",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=E4-(WEEKDAY(E4,1))-IF((WEEKDAY(E4,1))<=0,7,0)+1",
                "=E6+1",
                "=F6+1",
                "=G6+1",
                "=H6+1",
                "=I6+1",
                "=J6+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K6+1",
                "=E7+1",
                "=F7+1",
                "=G7+1",
                "=H7+1",
                "=I7+1",
                "=J7+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K7+1",
                "=E8+1",
                "=F8+1",
                "=G8+1",
                "=H8+1",
                "=I8+1",
                "=J8+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K8+1",
                "=E9+1",
                "=F9+1",
                "=G9+1",
                "=H9+1",
                "=I9+1",
                "=J9+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K9+1",
                "=E10+1",
                "=F10+1",
                "=G10+1",
                "=H10+1",
                "=I10+1",
                "=J10+1",
                null
                ],
                [
                "",
                "",
                "",
                "",
                "=K10+1",
                "=E11+1",
                "=F11+1",
                "=G11+1",
                "=H11+1",
                "=I11+1",
                "=J11+1",
                null
                ],
                null
            ],
            columns: [
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 69, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 55, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" },
                { "type": "text", "width": 70, "align": "left" }
            ],
            rows: [
                { "height": 29 },
                { "height": 53 },
                { "height": 29 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 40 },
                { "height": 53 },
                { "id": null, "height": 29 },
                { "id": null, "height": 29 },
                { "id": null, "height": 29 }
            ],
            meta: {},
            style: {
                "E2": 4,
                "F2": 4,
                "G2": 4,
                "H2": 1,
                "I2": 0,
                "J2": 1,
                "K2": 0,
                "E4": 3,
                "F4": 3,
                "G4": 3,
                "H4": 3,
                "I4": 3,
                "J4": 3,
                "K4": 3,
                "E5": 16,
                "F5": 16,
                "G5": 16,
                "H5": 16,
                "I5": 16,
                "J5": 16,
                "K5": 17,
                "E6": 8,
                "F6": 8,
                "G6": 8,
                "H6": 8,
                "I6": 8,
                "J6": 8,
                "K6": 9,
                "E7": 8,
                "F7": 8,
                "G7": 8,
                "H7": 8,
                "I7": 8,
                "J7": 8,
                "K7": 9,
                "E8": 8,
                "F8": 8,
                "G8": 8,
                "H8": 8,
                "I8": 8,
                "J8": 8,
                "K8": 9,
                "E9": 8,
                "F9": 8,
                "G9": 8,
                "H9": 8,
                "I9": 8,
                "J9": 8,
                "K9": 9,
                "E10": 8,
                "F10": 8,
                "G10": 8,
                "H10": 8,
                "I10": 8,
                "J10": 8,
                "K10": 9,
                "E11": 10,
                "F11": 10,
                "G11": 10,
                "H11": 10,
                "I11": 10,
                "J11": 10,
                "K11": 11
            },
            comments: {},
            cells: {
                "E4": { "mask": "mmmm YYYY" },
                "E6": { "mask": "dd" },
                "F6": { "mask": "dd" },
                "G6": { "mask": "dd" },
                "H6": { "mask": "dd" },
                "I6": { "mask": "dd" },
                "J6": { "mask": "dd" },
                "K6": { "mask": "dd" },
                "E7": { "mask": "dd" },
                "F7": { "mask": "dd" },
                "G7": { "mask": "dd" },
                "H7": { "mask": "dd" },
                "I7": { "mask": "dd" },
                "J7": { "mask": "dd" },
                "K7": { "mask": "dd" },
                "E8": { "mask": "dd" },
                "F8": { "mask": "dd" },
                "G8": { "mask": "dd" },
                "H8": { "mask": "dd" },
                "I8": { "mask": "dd" },
                "J8": { "mask": "dd" },
                "K8": { "mask": "dd" },
                "E9": { "mask": "dd" },
                "F9": { "mask": "dd" },
                "G9": { "mask": "dd" },
                "H9": { "mask": "dd" },
                "I9": { "mask": "dd" },
                "J9": { "mask": "dd" },
                "K9": { "mask": "dd" },
                "E10": { "mask": "dd" },
                "F10": { "mask": "dd" },
                "G10": { "mask": "dd" },
                "H10": { "mask": "dd" },
                "I10": { "mask": "dd" },
                "J10": { "mask": "dd" },
                "K10": { "mask": "dd" },
                "E11": { "mask": "dd" },
                "F11": { "mask": "dd" },
                "G11": { "mask": "dd" },
                "H11": { "mask": "dd" },
                "I11": { "mask": "dd" },
                "J11": { "mask": "dd" },
                "K11": { "mask": "dd" }
            },
            cache: {},
            mergeCells: { "E2": [3, 1], "E4": [7, 1] }
            }
        ],
        namespace: "6618d602-82d3-402a-83e2-f5bbc1f761b2",
        version: "d88ae7f0-0cf5-4457-9353-583c70f8f9e6",
        style: [
            "text-align:center",
            "text-align:center;font-weight:bold",
            "text-align:center;background-color:#b71c1c",
            "text-align:center;background-color:#b71c1c;color:#ffebee",
            "text-align:center;font-weight:bold;font-size:medium",
            "text-align:center;font-weight:bold;background-color:#e53935",
            "text-align:center;font-weight:bold;background-color:#ef5350",
            "text-align:center;font-weight:bold;background-color:#ffcdd2",
            "text-align:center;border-top:1px solid black;border-left:1px solid black",
            "text-align:center;border-top:1px solid black;border-right: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;border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ef9a9a;border-bottom:1px solid #ef9a9a;border-left:1px solid #ef9a9a",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ef9a9a;border-right:1px solid #ef9a9a;border-bottom:1px solid #ef9a9a;border-left:1px solid #ef9a9a",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:center;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-right:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:left;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2",
            "text-align:left;font-weight:bold;background-color:#ffcdd2;border-top:1px solid #ffcdd2;border-right:1px solid #ffcdd2;border-bottom:1px solid #ffcdd2;border-left:1px solid #ffcdd2"
        ],
        toolbar: true
    });
  }
}