Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Calendar Month Heatmap Stats Block for Vue

A six-week calendar of square cells showing each day's date and meeting hours in five foreground steps, beside the month's total, busiest day, quietest weekdays and weekday average.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A month of meeting load for Vue with Ark UI. A split with a hairline divider: at the start from lg, a header that states the month's total, "Meetings took 106 hours of March", and a list of four facts (the month's total, the busiest day, the quietest weekdays and the average weekday); at the end, a calendar with weekday headings, six weeks of square cells and a key. Each cell shows the date and the hours spent in meetings that day, shaded in five solid steps of your theme's foreground colour (none, up to 2, 4, 6 and over 6 hours), and the busiest day is outlined. The month is named, never dated to a year. The calendar is a real table with a caption, weekday column headings and a sentence per cell for screen readers, and every figure is counted from one list of daily hours. On a phone the calendar comes first, right after the header, with square cells, and the facts follow. For meeting analytics, on-call load, support volume and any month of daily counts.

FAQ

How do I use my own month?

Edit HOURS (one number per day of the month, from the 1st), OFFSET (the weekday the month starts on, Monday is 0) and MONTH at the top of the file. The calendar draws six weeks, so it works for any month length; the total, the busiest day, the quietest weekdays and the average are all computed from HOURS. Weekends are left out of the weekday average and the quietest list.

How are the shades chosen?

A day's step comes from its hours: 0, up to 2, up to 4, up to 6, and above 6. The five steps are solid mixes of the foreground colour into the page, with the cell text switching to the page colour from the fourth step so it keeps its contrast in light and dark. The key under the calendar shows them in order, and every cell also writes its hours, so shade is never the only signal.

Why is the calendar a table?

A calendar is a grid of dates under weekday names, which is what a table is for: screen readers announce the weekday and the date for each cell, and a day with no meetings says so. The squares outside the month are empty cells. The table is forced left to right so the week starts at the same side in every language.

What does the outline mean?

It marks the busiest day of the month, the one the first fact names. If two days tie, the first is outlined. The ring is a gap of page colour and a foreground ring, so it stays visible on the darkest step.

How does it fit on a phone?

The calendar moves directly under the header and its cells become squares, about 36 pixels at 320; the date and the hours fit inside. The facts sit below it, separated by a hairline, and the key wraps under the calendar. Nothing scrolls sideways.

All 122 stats blocks