shadcn.io is not affiliated with official shadcn/ui
Calendar View Timeline Block for React
A film shoot week as seven day nodes on a horizontal rail, each dot as large as its calls and today ringed, with a toggle group of days that lists the chosen day's call sheet on a vertical rail underneath.
Installation
Overview
Show a week as a rail and open a day for its details, with this calendar view timeline for React with Base UI. It is written for Slateweek, a fictional production scheduler. A hairline frame with a plus mark on each corner holds the shoot week of a film, Monday 12 to Sunday 18 October, as seven day nodes on a horizontal rail instead of a grid of days. Each dot is as large as that day's calls, the days already wrapped are solid, today, Wed 14 Oct, has a ring and the days to come are dashed. The days are a toggle group, so the arrow keys move across them. Choosing a day lists its call sheet on a vertical rail underneath, Crew call 06:30, Setup, First shot, Lunch, Wrap, with who leads each call as initials, and Sunday says it is a rest day. The strip scrolls sideways on a phone while the call sheet stays where it is, and the sheet keeps its height for every day. It is built from ToggleGroup, Avatar, Badge and Guides, with an entrance only. For production schedules, rotas, class weeks and any week where each day holds a list. The shoot is example data.
FAQ
How do I change the week and the calls?
Edit WEEK. A day has an ISO date and a list of calls, each with a time, a title, a note and the id of the person who leads it. Dot sizes, the call counts and the wrapped, today and coming-up states come from the calls and from AS_OF.
Why does the call sheet not change height?
The day with the most calls is laid out again, unseen and inert, in the same grid cell as the live sheet. The cell takes its height, so every day fits without the footer moving.
How do I move between days with the keyboard?
Tab into the strip and use the arrow keys to move between the days; choosing one with Space or Enter shows its call sheet. A day can not be cleared, so one is always chosen.
What stays in the page, and how do I wire a real schedule?
The chosen day is local state and nothing is saved or sent. For a real schedule, load the days and calls from your scheduling system and keep clock times local to the set, with the date in ISO form.
Is it accessible, and does it work in a right-to-left page?
Each day is a button named with its date, whether it is today, wrapped or coming up, and its number of calls; the dots are decoration. A polite status line says what the chosen day holds. The week runs left to right in every language, like a chart, while the call sheet follows the page direction.