shadcn.io is not affiliated with official shadcn/ui
Block Schedule Calendar Block for React Aria
A time-budget planner: pick a brush, paint ten hour tiles from 08:00, and watch four budgets fill with the sum in words and a bar each.
Installation
Overview
Plan the hours of a day as a budget with this block schedule for React with React Aria. A ToggleGroup is the brush: Deep work, Meetings, Admin, Break or Clear, each with its own pattern and word. Press any of the ten hour tiles from 08:00 to 18:00 on Wednesday 14 October 2026 to paint it, and a standup and a client call are locked tiles that say so and cannot be painted over. At the start of the split four budgets of 4 h of deep work, 3 h of meetings, 1 h of admin and 1 h of break fill as you paint, each with a Progress bar and the sum in words, such as 3 of 4 h or 1 h over. A polite status line reports each change. The patterns are solid, hatched, dotted and outlined rather than colors, so the day reads in grayscale. It's built from ToggleGroup, Progress and Guides, with a CSS entrance only.
FAQ
How do I change the budgets and the hours?
Edit BRUSHES for the categories and their hours, and TILES for the hours. A tile has an hour, a start category and an optional lock naming the fixed event on it. The bars, the sums and the status text are worked out from the tiles.
What are the locked tiles?
Tiles with a lock hold a fixed event, like a standup or a client call. They are marked with a padlock and the event's name, they count toward the budget they belong to, and pressing one says why it cannot change instead of painting it.
What happens when a budget is over?
Painting is never blocked. The row says how many hours over you are in words and in a heavier weight, and its bar stays full. The summary at the foot names every category that is over.
Why are the brushes patterns and not colors?
A color alone can't be told apart by everyone and it vanishes in a printout. Each brush has a pattern and a word, and the hour tiles repeat both.