shadcn.io is not affiliated with official shadcn/ui
Color Coded Calendar Block for React Aria
A two-week calendar whose categories are coded by pattern, not by color: pick one of five fills for each category, hide a category with its switch, and watch the grid and the event count redraw.
Installation
Overview
Let people code their own calendar with this color coded calendar for React with React Aria, which swaps colors for patterns anyone can tell apart. A hairline frame with a plus mark on each corner holds a legend of five categories (work, health, home, money and leisure), each with a Select of the five fills (solid, outline, hatched, dotted and plain) and a Switch that hides it. Under the legend is a two-week grid, 12 to 25 October 2026, whose event pills are drawn in their category's fill. Choosing a fill another category already holds swaps the two and says so in a polite status line ("Hatched moved to Work, and Solid to Health"), and the status always counts what is showing ("Showing 21 of 27 events"). The fixed "now", 14 October, carries a ring, and the grid keeps its height whatever is hidden. The bands are ruled by Guides. Below the small breakpoint the legend scrolls sideways and the grid keeps its seven columns of patterned marks, with each title still read aloud. It's built from Select, Switch and Guides, with a CSS entrance only. For shared calendars, schedulers and any app that wants a color-free key.
FAQ
How do I add categories or events?
Edit CATEGORIES and EVENTS. Each event has an ISO date, a title and a category id, and START_LOOK gives each category its first fill. The counts, the pills and the status are all worked out from those lists. The two weeks start at FIRST_DAY.
Why patterns instead of colors?
Color alone can't be told apart by everyone, and it vanishes in grayscale and in print. Each fill here differs in shape and texture as well as strength: a solid bar, an outline, diagonal hatching, dots or plain, so the key reads the same in every theme. Add a sixth fill in patternClass and the PATTERNS list.
What happens when two categories want the same fill?
They trade. If Work picks Hatched while Health holds it, Health gets Work's old fill, so no two categories ever look alike, and the status line names both changes. The menus always show the fill the category has now.
What does the switch do?
It hides that category's events from the grid and from the count, without moving anything: each day cell has a fixed height, so the grid never jumps. Turn every category off and the grid is simply empty, with the count at zero.