Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Study Planner Calendar Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Turn the hours you have into a revision week with this study planner for Solid with Ark 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.

What stays local, and how do I wire it up?

Everything. The slider, the plan and the ticks only change state in the page and reset on reload. To make it real, save the plan and the ticked ids with your own API, and feed the subjects from the user's exam list.

How does it look on a phone?

The slider and the button stack, each subject keeps its bar under its name, the sessions scroll in a box of fixed height and the month drops under them. The empty state before planning takes the same box, so the page does not jump when the plan appears.