Attendance Sheet
Monthly attendance tracking with weekend/holiday coloring and summary columns.
How it works
This demo builds a monthly attendance tracking sheet. Each row is an employee and each column is a day of the month. Weekend columns are automatically colored, and summary columns count present/absent days.
- Column headers show the day number; weekends (Saturday, Sunday) have a light blue/pink background applied automatically
- Attendance is coded as ○ (present), × (absent), △ (half-day), or 休 (holiday leave)
- Summary columns on the right count each status type using COUNTIF formulas
- The grid uses freeze panes — employee names in column A stay visible while scrolling through all 31 days
- Date calculation is done in JavaScript; changing the month at the top regenerates the column headers
Key APIs used
ws.cell(row, col).setStyle(style) Apply weekend background colors and header styles based on computed day-of-week
ws.setFrozenColumns(count) Freeze the employee name column so it stays visible while scrolling through all month columns
ws.setCellInput(row, col, value) Set COUNTIF formulas in summary columns and date headers in the top row
ws.column(index).setWidth(px) Set narrow widths for day columns and wider widths for the name and summary columns
Related Documentation
Related Demos
Invoice (Formula)
Invoice with editable quantities and unit prices — totals auto-calculate with formulas. Available on StackBlitz as React, Vue, and Vanilla.
Interactive Quotation
Edit quantities and unit prices — totals auto-calculate with SUM formulas. Real spreadsheet formulas running in the browser.
Budget Tracker
Quarterly income and expense tracker with category sections, color-coded totals, and profit summary.