shadcn.io is not affiliated with official shadcn/ui
Class Timetable Calendar Block for Radix UI
A school week as a grid of five days by six periods with the subject, room and teacher in each lesson, a Week A and Week B switch worked out from a typed term start, double lessons that span two periods and a Now tag on the lesson on at the fixed time.
Installation
Overview
Show a school's two-week cycle in one window with this class timetable for React with Radix UI. A framed window with a plus mark on each corner holds a top bar with the title, a Segment Group for Week A and Week B and a Now button, then a grid of Monday to Friday by six periods from 08:30 to 15:30. Each lesson is a cell with its subject as a word and a pattern (never a colour), its room and the teacher's initials, and a lesson that repeats in the next period becomes a double lesson that spans both. This week's letter is worked out from a typed term start, so the week of 12 October is B, and the other letter shows the dates of the next time it comes round. The lesson on at the fixed time, Wednesday at 09:30, carries a Now tag, and choosing any lesson, with a click or the arrow keys, fills the strip at the foot. Only the grid scrolls, with the day names and the periods sticky; on a phone the grid becomes a row of day Tabs over that day's periods. It's built from Segment Group, Shine Button, Tabs, Badge and Guides, with a CSS entrance only. For school timetables, rotas on a two-week cycle and any weekly grid where the same slot holds different things in alternate weeks.
FAQ
How do I put in my own timetable?
Edit WEEK_A and WEEK_B. Each is five strings, Monday to Friday, with one letter for each of the six periods, and SUBJECTS gives every letter its name, room, teacher's initials and pattern. A dash is a free period. Two of the same letter in a row become one double lesson, and PERIODS holds the start and end of each period.
How is the week letter worked out?
TERM_START is a Monday that began a week A. A week's letter comes from how many whole weeks lie between that Monday and the week's Monday: an even number is A, an odd one is B. The other letter shows the dates of its next turn, so Week A shows the week of 19 October while this week is B. Change TERM_START and every date follows.
Where does the Now tag come from?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now: it is Wednesday at 09:30, which falls in period 2, so that lesson is tagged in this week's letter only. To follow the real time, set AS_OF from your own clock and keep the rest.
How do I move around with the keyboard?
The lessons are one tab stop. The arrow keys move to the next or previous lesson and the choice fills the strip at the foot, which is also the page's polite status line. Free periods are not choices. Each lesson is named with its subject, day, times, room and teacher.
What stays local, and how do I wire it up?
Everything. Switching weeks and choosing lessons only change state in the page, and nothing is saved or sent. To make it real, load the two weeks from your own API, keep the same slot shape, and write a lesson's detail into the foot strip from whatever a choice returns.