shadcn.io is not affiliated with official shadcn/ui
Family Organizer Calendar Block for React
One day of a household of four by person, 07:00 to 21:00, with a day strip for the week, a toggle per member and hatched family events that span every column.
Installation
Overview
Plan a household's day by person with this family organizer calendar for React with Base UI. A hairline frame with a plus mark on each corner starts with a strip of the seven days of the week of a fixed 14 October 2026, each with its event count, built as a ToggleGroup; Thursday 15 opens. Below it four member columns run from 07:00 to 21:00 with each person's events, school and nursery filling the weekdays, and the events that belong to everyone are hatched and span every column. A Toggle per member shows or hides a column, never the last one, and a thin line marks the time of "now" when you look at today. On a phone one member shows at a time, chosen from a NativeSelect. Positions come from two CSS variables, so the grid is plain CSS. The bands are ruled by Guides. It's built from ToggleGroup, Toggle, NativeSelect, Avatar and Guides, with a CSS entrance only. For family planners, shared household apps and any calendar that is read by person.
FAQ
How do I use my own family?
Edit MEMBERS and SLOT_LINES: each line is the day, the member id (or all for a shared event), the start, the end and the title, separated by bars. routineOf adds the weekday school and nursery hours. Keep the events of one person from overlapping.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, derived date and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.
How are shared events drawn?
Events marked all are hatched with a dashed edge and span every visible column from their start to their end. They are listed once, under their own label, so a screen reader hears them once rather than once per column.
How do the member toggles behave?
Each toggle shows or hides that person's column on wide screens and updates the count in the day strip. The last visible column cannot be hidden: the status line says so. On a phone the toggles give way to a select that shows one member.