shadcn.io is not affiliated with official shadcn/ui
Due Date Board Kanban Block for Vue
A marking board of fourteen assignments laid out by teacher, with a glyph and a word for each due date and a rule that stops work being handed to a teacher who is away on the day it is due.
Installation
Overview
Hand out marking by who is in with this due date board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds five lanes that share their lines: Unassigned and one lane for each of four teachers. Every card is an assignment with its class and its due date as a glyph and a word in an outline Badge ("3 days overdue", "Due tomorrow") beside the date in a time element, all worked out from one fixed "today" (Monday 12 October in this demo, with no clock). A lane head counts its assignments and, when its teacher is away, gives the dates, so everyone can see why a hand-over will be refused. Moving a card hands the marking to that teacher, and the board has one rule about time: a teacher who is away can't take an assignment due on those days, and the refusal names the assignment, the date and the teacher. 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 move and Reset puts the board back. The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For classroom marking, support rotas and any work handed between people with dates.
FAQ
How do I fill it with my own assignments and people?
Edit COLUMNS, AWAY and START. A lane is an id and a name; an away entry is a lane owner, a from and a to date as YYYY-MM-DD, both days included; a card has an id, a title, a subject, a due date and the column it starts in. Every count and sentence is worked out from them. Change AS_OF to move the demo's "today".
How does the away rule work?
refusalOf looks up the card's due date and asks awayOn whether the teacher it is going to is away that day. If so the card stays where it is and the status line says which assignment, which date and which teacher. The drop, the keyboard steps and the menu all ask the same function. Moving a card to Unassigned, or to a teacher who is in, is always allowed, and an away teacher keeps the cards they already had.
Where do the date words come from?
From the card's ISO date and one constant, AS_OF, with plain arithmetic on whole days: no clock and no Intl, so the server and the browser print the same words. Below zero is "N days overdue", zero is "Due today", one is "Due tomorrow", up to six is "Due in N days" and later shows the date. The glyph changes with the words, so colour is not the only signal.
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 lane 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 send the new owner. The names, jobs and dates are made up.