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('ZjNjZjhkM2Q2MGI5NzM4Y2U2ZmU4ZmNlNzFiMjdlOTAyYTEzNWU2OTdhNzgxMjkwN2JkYjgzMzlmOGM2NDRkOGEwNjVhZTJiNGU4NjZhYTczNTU3MzNjNGM1NTc1Zjk4YTM2N2JjMjU5MmY5ZmJmMTE2YTIzNjU1ZjczNGEyNzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOamN3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
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 = 'ZjNjZjhkM2Q2MGI5NzM4Y2U2ZmU4ZmNlNzFiMjdlOTAyYTEzNWU2OTdhNzgxMjkwN2JkYjgzMzlmOGM2NDRkOGEwNjVhZTJiNGU4NjZhYTczNTU3MzNjNGM1NTc1Zjk4YTM2N2JjMjU5MmY5ZmJmMTE2YTIzNjU1ZjczNGEyNzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOamN3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';
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('ZjNjZjhkM2Q2MGI5NzM4Y2U2ZmU4ZmNlNzFiMjdlOTAyYTEzNWU2OTdhNzgxMjkwN2JkYjgzMzlmOGM2NDRkOGEwNjVhZTJiNGU4NjZhYTczNTU3MzNjNGM1NTc1Zjk4YTM2N2JjMjU5MmY5ZmJmMTE2YTIzNjU1ZjczNGEyNzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOamN3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet.setExtensions({ formula });
export default {
components: { Spreadsheet, Worksheet },
data() {
return {
// Set your JSS license key (The following key only works for one day)
license: 'ZjNjZjhkM2Q2MGI5NzM4Y2U2ZmU4ZmNlNzFiMjdlOTAyYTEzNWU2OTdhNzgxMjkwN2JkYjgzMzlmOGM2NDRkOGEwNjVhZTJiNGU4NjZhYTczNTU3MzNjNGM1NTc1Zjk4YTM2N2JjMjU5MmY5ZmJmMTE2YTIzNjU1ZjczNGEyNzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOamN3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
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('ZjNjZjhkM2Q2MGI5NzM4Y2U2ZmU4ZmNlNzFiMjdlOTAyYTEzNWU2OTdhNzgxMjkwN2JkYjgzMzlmOGM2NDRkOGEwNjVhZTJiNGU4NjZhYTczNTU3MzNjNGM1NTc1Zjk4YTM2N2JjMjU5MmY5ZmJmMTE2YTIzNjU1ZjczNGEyNzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5UQTBOamN3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
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
});
}
}