shadcn.io is not affiliated with official shadcn/ui
Sprint Timeline Kanban Block for Solid
A calendar board of fifteen stories in three two-week sprints and a backlog, each sprint head giving its dates, where it stands, its points and a velocity line you can base on the average, best or worst of the last three sprints.
Installation
Overview
Plan the next sprints against what the team really finishes with this sprint calendar for Solid with Ark UI. A hairline frame with a plus mark on each corner holds four lanes that share their lines: Sprint 42, which is running, Sprint 43, Sprint 44 and the Backlog. Each head gives the sprint's dates and where it stands against one fixed "today" (Monday 12 October in this demo, with no clock), "Day 1 of 14" for the running sprint and "Starts in 14 days" for the next, totals its points, and draws a velocity line: a thin bar with a tick at the team's velocity and the gap in words, "2 over" or "3 under". A Native Select in the header picks whether the velocity is the average, the best or the worst of the last three sprints. Each story shows its points in a Badge and its owner's initials in an Avatar. Moving a story updates the totals of both sprints, and moving one into the running sprint says it was added mid-sprint. A card moves three ways: drag it by its grip, focus the grip and press Space to pick it up, the arrow keys to move it, Space to drop it and Escape to cancel, or open its Dropdown Menu and choose a lane under "Move to", which is the route for a single pointer and for touch. A polite status line in the foot reports each change and Reset puts the plan back. The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For sprint planning, release trains and any work cut into dated periods.
FAQ
How do I fill it with my own sprints and stories?
Edit COLUMNS, PAST and START. A lane has an id, a name and a start and end date as YYYY-MM-DD (empty strings make the backlog); PAST holds the points finished in the last sprints; a story has an id, a title, an owner, its points and the column it starts in. Dates, totals and sentences are all calculated. Change AS_OF to move the demo's "today".
What is the velocity line, and what does the select change?
It compares a sprint's points with one number, the velocity. The bar fills to the sprint's points out of one and a half times the velocity, the tick marks the velocity itself, and the words under it say how far over or under it is. The select chooses the number: the rounded average of PAST (21 here), its largest value (24) or its smallest (18). The line shows load, it never blocks a move, so a sprint can be planned over its velocity and the head says so.
Where do Day 1 of 14 and Starts in 14 days come from?
From each sprint's dates and AS_OF, with plain arithmetic on whole days: no clock and no Intl, so the server and the browser print the same words. A sprint whose first day is today or earlier reads "Day N of M", a later one reads "Starts in N days", and the backlog has no dates.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring lane (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every sprint and the current one ticked. Choosing one moves the card by the same route as a drop, so the same rule applies, puts focus on the card in its new place and says so in the status line.
What stays in the demo, and how do I save the moves?
Everything: the cards live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through, and feed PAST from your tracker's finished sprints. The names, jobs and dates are made up.