Heatmap Calendar Chart
CSS grid calendar heatmap shading daily activity by foreground opacity across a six month window.
CSS grid calendar heatmap shading daily activity by foreground opacity across a six month window.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Heatmap Calendar Chart is the activity calendar panel for Jan to Jun 2026, weeks as columns and Mon through Sun as rows. Each 14x14 cell is shaded by foreground opacity (0, 20%, 40%, 65%, 100%) so the scale respects dark mode without any green status color. Month labels float above the first week column of each month. Apr 14 is the darkest cell: the product launch day.
The calendar is pure CSS grid with no recharts dependency. A seeded pseudo-random generator makes the level pattern deterministic across renders, and the buildCalendar function hard-codes the Apr 14 spike to level 4.
Reach for this block on an analytics or activity page where you need to show contribution or event density over a rolling window. Replace buildCalendar with a fetch that returns one entry per day with a 0-4 level derived from your event count buckets.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the deployment or commit frequency heatmap. Other calendar reads:
Tip: the footnote naming the darkest day is worth keeping; numbers alone never explain a spike.