shadcn.io is not affiliated with official shadcn/ui
Daily Planner Kanban Block for Radix UI
A one-person day on a board of Morning, Afternoon, Evening and Not today, with a minutes total on every lane, a meter against an eight-hour day and a refusal when planning a task would go over it.
Installation
Overview
Fit a day into eight hours with this planner for React with Radix UI. A hairline frame with a plus mark on each corner holds four lanes that share their lines: Not today, for tasks outside the plan, and Morning, Afternoon and Evening. Each of the twelve tasks has a length in minutes with a clock glyph in an outline Badge and a tag (Focus, Admin, Call, Errand or Home) in a secondary one. Every lane head totals its minutes in hours and minutes, and a meter above the board shows the planned total against the eight-hour day with the time still free, so the sentence under the heading and the meter follow every move. The day has a limit: a task from Not today can't be planned if the day would go over 8 h, and the refusal says what the plan would become and what to do. 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 personal planning, time blocking and any day with a fixed capacity.
FAQ
How do I fill it with my own tasks?
Edit COLUMNS and START. A task has an id, a title, its minutes, a tag and the column it starts in; the lane parked is the one outside the plan. Change CAP to change the length of the day (480 minutes is eight hours). Every total, the meter and the sentence are calculated from the tasks.
How does the 8 h limit work?
refusalOf adds the task's minutes to what is planned in the three parts of the day. If the sum is above CAP and the task is coming from Not today, the move is refused and the status line says what the plan would have become. A task that exactly fills the day is allowed. Moving a task between Morning, Afternoon and Evening, or out to Not today, never changes the total, so it is never refused.
How are the minutes counted and shown?
By adding the cards' minutes in each lane, and minutesWords prints them as "2 h 15 min", "1 h" or "45 min". The meter is only a picture of the planned total over the cap; the same numbers are written beside it, so nothing depends on seeing the bar.
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 part of the day 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 let the server repeat the capacity check. The names, jobs and dates are made up.