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>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Material+Icons&display=swap" />
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmVjNTk0NjY5MDcwMWRiN2JkMzExNzEyNTUzOTQ3YWFjNDk3MzA0NmRiZjMxZTgyOGZlZjBjMDQ1NzZiYjE2NGJhNTdmMjI0ZGNmMDE0YzI1MDE5OWRmNDZkNmNmYmRiY2NkMjBjNzZhMmZjOWQ0M2Q2YzBkMmY2MzhlZWY0YTgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5qQTFPRFF5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula });
jspreadsheet(document.getElementById('spreadsheet'), {
tabs: true,
toolbar: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [15, 15],
worksheetName: "Sheet1",
tableOverflow: true,
textOverflow: true,
defaultColAlign: "left",
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],
],
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 },
{ height: 29 },
{ height: 29 },
{ height: 29 }
],
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;font-weight:bold;color:#991b1b;background-color:#fff1f2;border-bottom:2px solid #fecaca",
"text-align:center;font-weight:bold;color:#dc2626",
"text-align:center",
"text-align:center;font-weight:bold;color:#ffffff;background-color:#b91c1c;font-size:16px",
"text-align:center;font-weight:bold;font-size:medium;color:#ffffff;background-color:#7f1d1d",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center;color:#1e293b;background-color:#ffffff;border-top:1px solid #fecdd3;border-left:1px solid #fecdd3",
"text-align:center;color:#991b1b;font-weight:bold;background-color:#fff1f2;border-top:1px solid #fecdd3;border-right:1px solid #fecdd3;border-left:1px solid #fecdd3",
"text-align:center;color:#1e293b;background-color:#ffffff;border-top:1px solid #fecdd3;border-bottom:3px solid #dc2626;border-left:1px solid #fecdd3",
"text-align:center;color:#991b1b;font-weight:bold;background-color:#fff1f2;border-top:1px solid #fecdd3;border-right:1px solid #fecdd3;border-bottom:3px solid #dc2626;border-left:1px solid #fecdd3",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center;font-weight:bold;color:#ffffff;background-color:#f87171;border-bottom:1px solid #dc2626;border-left:1px solid #ef4444",
"text-align:center;font-weight:bold;color:#fde68a;background-color:#f87171;border-bottom:1px solid #dc2626;border-right:1px solid #ef4444;border-left:1px solid #ef4444"
]
});
</script>
</html>
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";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmVjNTk0NjY5MDcwMWRiN2JkMzExNzEyNTUzOTQ3YWFjNDk3MzA0NmRiZjMxZTgyOGZlZjBjMDQ1NzZiYjE2NGJhNTdmMjI0ZGNmMDE0YzI1MDE5OWRmNDZkNmNmYmRiY2NkMjBjNzZhMmZjOWQ0M2Q2YzBkMmY2MzhlZWY0YTgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5qQTFPRFF5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula });
export default function App() {
const spreadsheetRef = useRef(null);
useEffect(() => {
const instance = jspreadsheet(spreadsheetRef.current, {
tabs: true,
toolbar: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [15, 15],
worksheetName: "Sheet1",
tableOverflow: true,
textOverflow: true,
defaultColAlign: "left",
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],
],
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 },
{ height: 29 },
{ height: 29 },
{ height: 29 }
],
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;font-weight:bold;color:#991b1b;background-color:#fff1f2;border-bottom:2px solid #fecaca",
"text-align:center;font-weight:bold;color:#dc2626",
"text-align:center",
"text-align:center;font-weight:bold;color:#ffffff;background-color:#b91c1c;font-size:16px",
"text-align:center;font-weight:bold;font-size:medium;color:#ffffff;background-color:#7f1d1d",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center;color:#1e293b;background-color:#ffffff;border-top:1px solid #fecdd3;border-left:1px solid #fecdd3",
"text-align:center;color:#991b1b;font-weight:bold;background-color:#fff1f2;border-top:1px solid #fecdd3;border-right:1px solid #fecdd3;border-left:1px solid #fecdd3",
"text-align:center;color:#1e293b;background-color:#ffffff;border-top:1px solid #fecdd3;border-bottom:3px solid #dc2626;border-left:1px solid #fecdd3",
"text-align:center;color:#991b1b;font-weight:bold;background-color:#fff1f2;border-top:1px solid #fecdd3;border-right:1px solid #fecdd3;border-bottom:3px solid #dc2626;border-left:1px solid #fecdd3",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center;font-weight:bold;color:#ffffff;background-color:#f87171;border-bottom:1px solid #dc2626;border-left:1px solid #ef4444",
"text-align:center;font-weight:bold;color:#fde68a;background-color:#f87171;border-bottom:1px solid #dc2626;border-right:1px solid #ef4444;border-left:1px solid #ef4444"
]
});
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:tabs="true"
:toolbar="true"
:tableOverflow="true"
:tableWidth="1360"
:tableHeight="620"
:resizable="true"
:worksheets="worksheets"
:styles="styles">
</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";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmVjNTk0NjY5MDcwMWRiN2JkMzExNzEyNTUzOTQ3YWFjNDk3MzA0NmRiZjMxZTgyOGZlZjBjMDQ1NzZiYjE2NGJhNTdmMjI0ZGNmMDE0YzI1MDE5OWRmNDZkNmNmYmRiY2NkMjBjNzZhMmZjOWQ0M2Q2YzBkMmY2MzhlZWY0YTgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5qQTFPRFF5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula });
export default {
components: { Spreadsheet, Worksheet },
data() {
return {
license: 'YmVjNTk0NjY5MDcwMWRiN2JkMzExNzEyNTUzOTQ3YWFjNDk3MzA0NmRiZjMxZTgyOGZlZjBjMDQ1NzZiYjE2NGJhNTdmMjI0ZGNmMDE0YzI1MDE5OWRmNDZkNmNmYmRiY2NkMjBjNzZhMmZjOWQ0M2Q2YzBkMmY2MzhlZWY0YTgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5qQTFPRFF5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9',
worksheets: [
{
minDimensions: [15, 15],
worksheetName: "Sheet1",
tableOverflow: true,
textOverflow: true,
defaultColAlign: "left",
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],
],
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 },
{ height: 29 },
{ height: 29 },
{ height: 29 }
],
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] }
}
],
styles: [
"text-align:center;font-weight:bold;color:#991b1b;background-color:#fff1f2;border-bottom:2px solid #fecaca",
"text-align:center;font-weight:bold;color:#dc2626",
"text-align:center",
"text-align:center;font-weight:bold;color:#ffffff;background-color:#b91c1c;font-size:16px",
"text-align:center;font-weight:bold;font-size:medium;color:#ffffff;background-color:#7f1d1d",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center;color:#1e293b;background-color:#ffffff;border-top:1px solid #fecdd3;border-left:1px solid #fecdd3",
"text-align:center;color:#991b1b;font-weight:bold;background-color:#fff1f2;border-top:1px solid #fecdd3;border-right:1px solid #fecdd3;border-left:1px solid #fecdd3",
"text-align:center;color:#1e293b;background-color:#ffffff;border-top:1px solid #fecdd3;border-bottom:3px solid #dc2626;border-left:1px solid #fecdd3",
"text-align:center;color:#991b1b;font-weight:bold;background-color:#fff1f2;border-top:1px solid #fecdd3;border-right:1px solid #fecdd3;border-bottom:3px solid #dc2626;border-left:1px solid #fecdd3",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center;font-weight:bold;color:#ffffff;background-color:#f87171;border-bottom:1px solid #dc2626;border-left:1px solid #ef4444",
"text-align:center;font-weight:bold;color:#fde68a;background-color:#f87171;border-bottom:1px solid #dc2626;border-right:1px solid #ef4444;border-left:1px solid #ef4444"
]
};
},
};
</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('YmVjNTk0NjY5MDcwMWRiN2JkMzExNzEyNTUzOTQ3YWFjNDk3MzA0NmRiZjMxZTgyOGZlZjBjMDQ1NzZiYjE2NGJhNTdmMjI0ZGNmMDE0YzI1MDE5OWRmNDZkNmNmYmRiY2NkMjBjNzZhMmZjOWQ0M2Q2YzBkMmY2MzhlZWY0YTgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5qQTFPRFF5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
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,
toolbar: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [15, 15],
worksheetName: "Sheet1",
tableOverflow: true,
textOverflow: true,
defaultColAlign: "left",
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],
],
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 },
{ height: 29 },
{ height: 29 },
{ height: 29 }
],
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;font-weight:bold;color:#991b1b;background-color:#fff1f2;border-bottom:2px solid #fecaca",
"text-align:center;font-weight:bold;color:#dc2626",
"text-align:center",
"text-align:center;font-weight:bold;color:#ffffff;background-color:#b91c1c;font-size:16px",
"text-align:center;font-weight:bold;font-size:medium;color:#ffffff;background-color:#7f1d1d",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center;color:#1e293b;background-color:#ffffff;border-top:1px solid #fecdd3;border-left:1px solid #fecdd3",
"text-align:center;color:#991b1b;font-weight:bold;background-color:#fff1f2;border-top:1px solid #fecdd3;border-right:1px solid #fecdd3;border-left:1px solid #fecdd3",
"text-align:center;color:#1e293b;background-color:#ffffff;border-top:1px solid #fecdd3;border-bottom:3px solid #dc2626;border-left:1px solid #fecdd3",
"text-align:center;color:#991b1b;font-weight:bold;background-color:#fff1f2;border-top:1px solid #fecdd3;border-right:1px solid #fecdd3;border-bottom:3px solid #dc2626;border-left:1px solid #fecdd3",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center",
"text-align:center;font-weight:bold;color:#ffffff;background-color:#f87171;border-bottom:1px solid #dc2626;border-left:1px solid #ef4444",
"text-align:center;font-weight:bold;color:#fde68a;background-color:#f87171;border-bottom:1px solid #dc2626;border-right:1px solid #ef4444;border-left:1px solid #ef4444"
]
});
}
}