shadcn.io is not affiliated with official shadcn/ui
Project Milestones Calendar Block for Solid
Four phases as bars and five milestones as diamonds on a fourteen-week ruler, where choosing one marks what blocks it and what it blocks, and Slip one week pushes it and its dependents.
Installation
Overview
Show a plan as dates on a ruler with this project milestones calendar for Solid with Ark UI. A hairline frame with a plus mark on each corner holds fourteen weeks from Monday 12 October 2026 to Sunday 17 January 2027, with four phases drawn as bars, five milestones drawn as diamonds and a rule at 14 October, the block's fixed "now". Choosing a bar or a diamond marks everything that must finish before it with a ring and the word Blocker, and everything that waits on it with a hatch and the word Blocked. The band under the ruler names its dates, how far off they are, its owner's initials and team, and lists what blocks it and what it blocks. An outline Button slips the chosen item and every item that depends on it by seven days and says what moved ("Launch moves from Tue 5 Jan to Tue 12 Jan. 0 later items move with it."), and Reset restores the plan. The ruler scrolls sideways under sticky names, and the bands are ruled by Guides. It's built from Button, Badge, Avatar and Guides, with a CSS entrance only. For project plans, launch schedules and any view where one date decides several others.
FAQ
How do I fill it with my own plan?
Edit ITEMS. Each item has an id, a kind of phase or milestone, a name, ISO start and end dates (the same day for a milestone), an owner and team, and after, the ids of the items that must finish before it starts. Blockers and dependents are worked out from after through any chain. Change RULER_START, RULER_DAYS and RULER_LAST to move or lengthen the ruler, and RULER_MONTHS to label it.
What does Slip one week do, and when does it refuse?
It adds seven days to the chosen item and to every item that depends on it, directly or through a chain, and keeps the others where they are. Choosing Launch moves only Launch; choosing Scope signed off moves almost the whole plan. It refuses when the last item would end after the ruler's last day, and says so in the status line; Reset puts every item back.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and the rule through the ruler and every "in 83 days" come 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.
How do I use it with the keyboard?
Every bar and diamond is a button that is pressed when it is chosen, named with its title, kind, dates and, once something else is chosen, whether it is a blocker or blocked. The ruler is also a scroll region you can reach with Tab and move with the arrow keys. The time axis keeps its left-to-right order in right-to-left languages, while names and dates are isolated so they read correctly.
Why are blockers rings and dependents hatched, not colored?
Color alone can't be told apart by everyone, and it vanishes in grayscale. The chosen item is solid, a blocker has a heavier outline and a dependent has diagonal hatching, and each also carries its word in the row's name cell and in the button's name.
What stays local, and how do I wire it up?
Everything. A slip only changes numbers in the page's state, and nothing is saved or sent. To make it real, keep offsets (days moved per item) on your server, call it from the slip handler and send the new dates back; the ruler, the roles and the status line all read from the same state.