shadcn.io is not affiliated with official shadcn/ui
Event Planning Pipeline Kanban Block for Svelte
A four-column events board of ten events with a date, a distance from a fixed day and a venue capacity meter, where an event can't be Confirmed in a room that seats too few.
Installation
Overview
Plan a season of events with this pipeline for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Idea, Planning, Confirmed and Held) and ten events. Each card shows the event's name, its date with the distance from a fixed day ("in 26 days", "12 days ago") and its venue with a capacity meter: a bar for the expected guests against the venue's seats, the two numbers in words, and "Over by 20 guests" once the room is too small. The venue's name is a Button that moves the event to the next of four venues, which is how a meter is brought back under its limit. The sentence under the heading counts how many events expect more guests than their venue seats and names the next one. A card moves three ways: drag it by its grip, press Space on the grip and use the arrow keys, or open its Dropdown Menu and choose a column under "Move to". Two rules guard the board: an event can't be Confirmed or Held in a venue that is too small, and can't be Held before its date. 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 columns scroll sideways in one named region with the next column showing. For conferences, workshops and any plan where a room has a limit.
FAQ
How do I fill it with my own events and venues?
Edit VENUES, COLUMNS and START. A venue has a name and its seats. A card has an id, the column it starts in, a title, an ISO date, the guests expected and venue, the position of its venue in VENUES. The meters, the date words and the header are calculated from those.
Where do
They are worked out from AS_OF, a fixed date at the top of the file, never from the clock, so the demo reads the same on every load and on the server and the browser alike. For real use, set AS_OF from the current date and the words, the next-event sentence and the Held rule follow.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its 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 column (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 column and the current one ticked. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
How do the two rules work, and how do I change them?
The rules are in the function refusalOf, which gets the cards, the event, the column it comes from and the column it is going to, and returns a reason or an empty string. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the event where it was, and the status line gives the numbers and the way out: change the venue from the card. Replace the body with your own rules, such as a deposit that must be paid.
What stays in the demo, and how do I save the changes?
Everything: the moves and the venue choices live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting plan. To save for real, call your API from put (every finished move goes through it) and from act (the venue button), and update the cards from the response. The events and venues are made up.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.