shadcn.io is not affiliated with official shadcn/ui
Weekly Planner Calendar Block for React Aria
A week of seven columns on half-hour rows in a fixed-height window, with side-by-side overlapping events, a Now line, a work-hours switch, a real Print and a New event button.
Installation
Overview
Plan a freelancer's week in one window with this weekly planner for React with React Aria. A top bar pages across three weeks around 12 to 18 October 2026, and under it a tool bar holds a Today button, a Work hours or Full day switch that changes the rows the grid shows, and a Print button that calls the browser's print dialog. The grid is seven day columns, Monday first, over half-hour rows with sticky day headers and a sticky hour column. Events are placed by their time and carry a category fill, a pattern and never a color, and events that share time stand side by side with the word Overlap in their name. A line marks 09:30 on Wednesday, the fixed now. Choosing a day header selects the day, pressing an event reads it out in the foot, and the one primary ShineButton adds a one-hour New event at the next free hour of the chosen day. Only the grid scrolls, so the window never grows, and a phone shows one day at a time with a ToggleGroup of the seven days. It's built from Button, ShineButton, 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 with an ISO date, wall-clock times, and a kind of client, team, focus, personal or admin. KINDS gives each kind its fill and its word. The counts, the columns, the overlap layout and the status line are all worked out from that array. Add a week by adding its Monday to WEEKS.
Why is today always Wednesday 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now, and the Today label, the Today button and the Now line all come from it, so the block looks the same on any day. To follow the real date, set AS_OF from your own clock or server.
How are overlapping events laid out?
Events on the same day are sorted by start, and each takes the first column that is free when it begins. Everything in a run of overlapping events shares the width of the column equally, side by side. Each one carries a layers icon and the word Overlap once it is tall enough, and its accessible name says it overlaps another event.
What does the Work hours and Full day switch do?
It changes which rows the grid draws: work hours are 08:00 to 18:00 and Full day is 06:00 to 22:00. Events outside the rows are not drawn, and the status line counts them so they are never silently lost. Change RANGES to use other hours.
What stays local, and how do I wire it up?
Everything except Print. Paging, choosing a day and adding an event only change state in the page, and a new event is lost on reload. To make it real, load the visible week from your own API when week changes and post the new event from addEvent; the grid reads whatever array you hand it.
How does it look on a phone?
One day shows at a time. A row of seven day buttons under the tool bar chooses it, each with its date, and the top bar keeps the title, the week arrows and the New event button as an icon with a hidden name. The grid still scrolls inside the window, and the hour column stays pinned.