Search blocks by description or jump to a page.
Month grid calendar with per-day activity dots scaled by event count and a selected-day event list beside it.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Activity Calendar is the when-did-things-happen view for a workspace: a CSS grid month calendar for June 2026 with per-day activity dots whose size and opacity scale with event count, and a selected day panel (Jun 10, 7 events) listing each event with its kind icon and time. The Jun 10 events include a fix commit at 09:14, Priya commenting on ACM-218 at 10:02, ACM-215 closed as fixed at 11:30, and four more through 17:41.
The grid is built from a const record of activity counts keyed by date. The dot opacity function maps count ranges to Tailwind opacity classes using theme tokens only; no chart library is involved.
Reach for this block on a project or personal activity
page, wired to your events endpoint grouped by day.
The selected day panel fires on day cell click; wire
aria-pressed to the active date in state.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project contribution history. Other calendar views:
Tip: the side event list is what separates an activity calendar from a heatmap, a dot tells you something happened, the list tells you what.