Calendar Month Heatmap Stats Block for React

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.

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.

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.

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.

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.