shadcn.io is not affiliated with official shadcn/ui
Year Overview Calendar Block for Ark UI
Twelve real months of 2026 on shared hairlines, each day weighted by how many meetings and deadlines it holds, with a toggle for All, Meetings or Deadlines and a readout naming the busiest day of the chosen month.
Installation
Overview
Show a whole year of load at a glance with this year overview calendar for React with Ark UI. A hairline frame with a plus mark on each corner holds twelve small months, four across on a desktop and two on a phone, sharing one-pixel lines. Each month is laid out on its real weekday columns, Monday first, and every day is one of five weights of the foreground color, from empty to full, set by how many meetings and deadlines the events put on it, with a Fewer to More key. A Toggle Group re-weights the year for All, Meetings or Deadlines. Each month's title is a button: choosing it rings the month and fills the readout under the grid ("October: 22 events on 13 days. Busiest: Tue 20 Oct, 5"). The fixed "now", 14 October, carries an outline, and every month has a text summary for screen readers, so the colored squares are never the only way to read it. The bands are ruled by Guides. It's built from Toggle Group and Guides, with a CSS entrance only. For capacity planners, agency calendars and any app that wants to show where a year gets busy.
FAQ
How do I fill it with my events?
Edit MEETINGS and DEADLINES: each is a list of ISO dates, and a date listed twice counts twice. The weights, the counts in each month's title and the readout are all worked out from those two lists. To add a kind, add another list, a segment in FILTERS and a term in countOn.
How are the five weights chosen?
levelOf turns a day's count into a step: none, one, two, three or four, and five or more. The steps are the foreground color at five strengths, so the block follows the theme in light and dark. Change levelOf to move the thresholds, for example to make four events the top step.
How is this different from a contribution heatmap?
It draws the calendar's own months, with real weekday columns, blank days outside each month and a month title you can choose, instead of a continuous run of weeks. That makes it good for planning against months, quarters and holidays rather than for streaks.
How does a screen reader read it?
The squares are decorative and hidden from assistive technology. Each month's title is a button named with its total ("October, 22 events") and a short list beside it gives the total, the number of busy days, the busiest day and, in the current month, today's date. Pressing a month announces the same summary in a polite status line.
What stays local, and how do I wire it up?
The filter and the chosen month live in the page and nothing is saved or sent. The events are a typed list worked out from a fixed 14 October 2026. To use real data, fetch the year's events from your own API, build the two date lists from them and leave the rest as it is.