shadcn.io is not affiliated with official shadcn/ui
Agenda List Calendar Block for React Aria
A seven-day agenda in a fixed-height scroll region with sticky day headers, a Now divider, a day-jump strip with counts and events that open to their notes.
Installation
Overview
Read the next seven days in order with this agenda list for React with React Aria. A scrolling region of fixed height lists 14 to 20 October 2026 with each day's header pinned as you scroll, worded from the fixed now as Today, Tomorrow and then the date, with all-day items first and a Now divider at 09:30 in today's list. A strip of the seven days with a count each sits above it, and choosing one scrolls the region to that day's header. Pressing an event opens a Collapsible row with its notes, place and head count, and only one is open at a time. A day with nothing on says so in words. Categories are marks with words, never colors, and the bands are ruled by Guides. It's built from Collapsible, ToggleGroup and Guides, with a CSS entrance only.
FAQ
How do I fill it with my events?
Edit LINES_DATA. Each line is date|start|end|kind|title|place|people|note, with empty start and end for an all-day item. The day headers, the counts, the Now divider and the order are worked out from the dates and AS_OF.
What does the day strip do?
It sets the scroll position of the region to the top of the chosen day, and nothing else on the page moves. It uses a smooth scroll unless the visitor asks for reduced motion. The strip scrolls sideways on a phone.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now, so the words Today and Tomorrow, the Now divider at 09:30 and the seven days all come from it and look the same on any day.
How do I use it with the keyboard?
The region is focusable and scrolls with the arrow keys and Page Up and Page Down. Each event is a button that opens or closes its notes with Enter or Space, and the strip is a toggle group you move through with the arrow keys.