shadcn.io is not affiliated with official shadcn/ui
Due Dates Calendar Block for Radix UI
Eight assignments worked backward from their due dates with an hours-a-day field, a Start by date per row, Submit and Reopen between two lists, and a month of start and due dates.
Installation
Overview
Plan student work backward from the deadline with this due dates calendar for React with Radix UI. A hairline frame with a plus mark on each corner starts with a NumberInput, "Hours a day I can study", set to 2. Below it eight assignments, each with its priority in a Badge, subject and estimated hours, show the day to start: the hours divided by the hours a day give the days of work, counted back from the due date, so a row reads "Start by Mon 19 Oct". When that day has already passed the row says "Start today" with a flag and how many hours a day it would then take. A SegmentGroup switches between Upcoming and Submitted, an outline Button submits or reopens one, and a drawn month marks every start and due date, moving as the field changes. The list is a held scroll region and an Empty state fills it when it is empty. The bands are ruled by Guides. For study planners, school apps and any tool that turns a deadline into a start date.
FAQ
How do I use my own assignments?
Edit ASSIGNMENTS: each has a title, a subject, a priority, whole hours and an ISO due date. The start date, the days of work and the hours a day needed are all worked out from them and from the field.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, bucket and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.
How is the start date worked out?
The days of work are the hours divided by the hours a day, rounded up, and the start date is that many days before the due date. If it is before the fixed "now", the row says "Start today" and shows the hours a day needed over the days that remain.
Why is a flag shown on some rows?
It marks work that should have begun already, with the heavier text. It is a glyph and a weight, not a color, and the other rows keep the space so nothing shifts.
What does the month beside the list do?
It is a drawn month, not a picker. Each date in the list is marked on it with a shape from the legend, and the marks move when the list changes. Previous and next step through the months the data covers. It is hidden from screen readers; a sentence under it says how many dates are marked, and the list holds every fact.