shadcn.io is not affiliated with official shadcn/ui
Kids Activities Calendar Block for React
A school week of pickups as day tabs, each with a Select for who collects, and a clash worked out when one adult has two pickups closer together than the travel time between the places.
Installation
Overview
Share the school run between a family with this kids activities calendar for React with Base UI. A hairline frame with a plus mark on each corner holds the week of 12 to 16 October 2026 as Tabs, one for each day, with Wednesday, the fixed "now", open. Each tab lists that day's pickups by time: the child, the place and a Select for who picks up, Ana, Ben, Grandma or the club bus. A clash is worked out from the choices. When one adult has two pickups at different places closer together than the typed travel time, both rows are flagged and the band under the list says it in words: "Ana: 25 minutes apart, needs 30". The header counts the week's clashes, each tab shows its own count in place of its pickup count, and reassigning one of the pickups clears it. A pickup by the club bus has no travel to check, and two pickups at the same place never clash. Every day has three pickups, so the panel keeps its height from tab to tab. The bands are ruled by Guides. Below the small breakpoint the tabs scroll sideways and the Select stays at the end of each row. It's built from Tabs, Select, Avatar and Guides, with a CSS entrance only. For family organisers, school-run planners and any app that shares driving between people.
FAQ
How do I add my own children, places and adults?
Edit PICKUPS (a child, a day, a place id, a time and a who), PLACES, ADULTS and TRAVEL_LINES, which lists the minutes by car between two places as "school|music|30". Set drives to false on an adult, such as a bus, who does not travel between places. The clashes, the counts and the tab labels are all worked out from them.
When is something a clash?
When the same adult has two pickups on the same day, at different places, with fewer minutes between the two times than the typed travel time between the places. Two pickups at one place are fine, and so is any pickup by a person who does not drive. The message gives the gap and the time needed.
How do I use it with the keyboard?
The day tabs are one tab stop and the arrow keys move between days. Each Select is named with the child and the time, such as "Who picks up Theo at 15:40", and opens with Enter or the arrow keys. A polite status line says who now picks up and how many clashes the week has.
Why does it open on Wednesday?
Nothing here reads the clock. The fixed "now" is Wednesday 14 October 2026, set by TODAY_ID, so the block looks the same on any day. Change it to open on another day.