shadcn.io is not affiliated with official shadcn/ui
Schedule Flow Kanban Block for Ark UI
A day of ten meetings placed on a board whose lanes are time slots, with a clash guard that refuses a slot where a person or a room is already taken and a room select on each card.
Installation
Overview
Fit a day of meetings together with this schedule board for React with Ark UI. A hairline frame with a plus mark on each corner holds six lanes that share their lines: Unscheduled and five hour-long slots (09:00, 10:00, 11:00, 13:00 and 14:00, with 12:00 left as lunch). Each of the ten cards is a meeting with two people, a room and the time its lane gives it ("10:00 to 11:00") in an outline Badge, and a Native Select on the card changes its room. A clash guard keeps the day honest: a meeting can't be put in a slot where one of its people is already in a meeting, or where its room is taken, and the refusal names the person or the room and the meeting that holds it; changing a room is checked the same way. A lane head counts its meetings and says "Free" when it has none, and the sentence under the heading names the free slots. 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 day back. The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For meeting rooms, appointment books and any day shared between people and places.
FAQ
How do I fill it with my own meetings?
Edit HOURS, COLUMNS, ROOMS and START. A slot is an id, a from and a to time, and its lane is a matching entry in COLUMNS; a meeting has an id, a title, two or more people, a room and the column it starts in (use pending for Unscheduled). Times are plain strings, so the server and the browser print the same text.
What counts as a clash?
Two meetings in the same slot that share a person or a room. clashOf checks the room first, then the people, and returns a sentence naming what is taken and by which meeting, or an empty string. The drop, the keyboard steps, the menu and the room select all call it, so no route gets around it. Unscheduled never clashes, and a meeting never clashes with itself.
What does the room select do?
It changes a meeting's room in place. The new room is checked against the slot the meeting is in, so choosing a taken room is refused with the same sentence a drop would give and the meeting keeps its room. That is how a room clash is resolved without leaving the slot: change the room, or move the meeting to another hour.
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. The room select is a separate stop on each card.
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 slot 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 for moves and act for room changes, and let the server make the final clash check. The names, jobs and dates are made up.