shadcn.io is not affiliated with official shadcn/ui
Study Planner Calendar Block for React
A slider for weekly study hours that, on Plan my week, splits them across five subjects by difficulty and days to each exam with the largest remainder, draws a bar per subject, and lays tickable sessions over the next seven days beside a month.
Installation
Overview
Turn the hours you have into a revision week with this study planner for React with Base UI. A hairline frame with a plus mark on each corner starts with a Slider for the hours you can give this week, from 6 to 30, and an outline Shine Button, Plan my week. Five subjects sit under it, each with its exam date, the days to go and a typed difficulty (easy, medium or hard). Pressing the button spreads the hours: a subject's share is its difficulty divided by the days to its exam, so the nearer and harder exams get more, and the shares are rounded by the largest remainder so the hours add up exactly. A Progress bar per subject shows the split, and the sessions it makes (two hours at most) are laid over the next seven days in a scrolling list, each with a Checkbox and a count that reads "4 of 9 done". A month in the side cell marks the study days and the exams. Move the slider after planning and a line says the plan is for the earlier hours. It's built from Slider, Shine Button, Progress, Checkbox, Empty and Guides, with a CSS entrance only. For revision planners and any plan that shares a fixed budget by need.
FAQ
How do I change the subjects?
Edit SUBJECT_LINES. Each line is id | subject | exam date | difficulty, with an ISO date and a difficulty of 1, 2 or 3. The weights, the hours, the sessions and the month marks are all worked out from them and from AS_OF.
How are the hours shared out?
weightOf gives each subject its difficulty over its days to go, as a whole number. planOf gives every subject the whole hours its share earns, then hands the hours still to place to the subjects with the largest remainders, ties going to the earlier exam, so the total is always the hours you chose.
How are the sessions laid out?
Each subject's hours become sessions of two hours with a one-hour session last. They are spread over the next seven days from the fixed "now" in a repeating pattern, so no subject lands on one day, and the list is in date order. Ticking a session counts it; planning again clears the ticks.
Why do the days to go start from 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now. To follow the real date, set it from your own clock and the exam dates from your calendar.