shadcn.io is not affiliated with official shadcn/ui
Exam Schedule Calendar Block for React
Ten November exams grouped by date with their time, room and length, how many days away each date is, the revision days left before the next exam counted from the dates, a Tight flag where exams fall on consecutive days and a month that marks them.
Installation
Overview
Show the exam period as it feels, with the gaps, using this exam schedule for React with Base UI. A hairline frame with a plus mark on each corner lists ten exams over November 2026 grouped by date, each date with its exams (the time, the paper and, when the "Show rooms" Switch is on, the room and how long it lasts) and how far away it is from the fixed "now" of 14 October, in words. Under each date is the gap to the next exam date worked out from the dates: "3 days to revise" with that many hatched revision blocks, or "Tight: next day" with a Badge where two exams fall on consecutive days, and "Last exam" on the final one. A month in the side cell marks the exam days, the tight ones and the revision days and pages between October and December. The list shows five dates, and a button opens the other four. It's built from Switch, Badge, Button and Guides, with a CSS entrance only. For school and university portals, revision planners and any list where the time between events matters as much as the events.
FAQ
How do I add my exams?
Edit EXAM_LINES. Each line is date | time | paper | room | minutes, with an ISO date and a 24-hour time, in date order. Dates are grouped from the lines, and the days away, the gaps, the revision blocks and the month marks are all worked out from them.
How is the revision gap counted?
gapOf is the number of days from one exam date to the next. One day apart means no day between, so the date is flagged Tight; any other gap leaves that number minus one days to revise, shown in words and as hatched blocks. Two exams on the same date count as one date.
What does the Show rooms switch do?
It hides the room and the length under each paper. The line is hidden from screen readers and keeps its space, so nothing on the page moves when you turn it on or off.
Why do the days away start from 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now, so "in 19 days" is the same on any day. To follow the real date, set AS_OF from your own clock.
What stays local, and how do I wire it up?
Everything. The switch, the month and the show-more button only change state in the page, and nothing is saved or sent. To make it real, load the exams from your own API and keep the grouping and the gaps, which are worked out from whatever dates you give them.