shadcn.io is not affiliated with official shadcn/ui
Time Blocking Task List Block for Vue
A day-planner window with a queue of unscheduled tasks beside a 09:00 to 17:00 grid in half-hour rows: pick a task, press a free slot to place it, and overlaps are refused with the reason.
Installation
Overview
Give every task a place in the day, with this time blocking to-do list block for Vue with Ark UI. It is a fixed-height window with a top bar that names the day, shows the day's load ("5 h 30 of 8 h") and holds the only colored control, a Shine Button that places the picked task in the first gap that fits. At the start a queue lists the unscheduled tasks with their lengths; press one to pick it. At the end a grid runs from 09:00 to 17:00 in half-hour rows, with fixed blocks (a stand-up, lunch, a design sync) drawn hatched. Press a free slot to place the picked task: it spans its length on the grid and has a Remove button that sends it back to the queue. A slot that would overlap a block, or run past 17:00, is refused in the status line with the reason. On a phone the queue becomes a Native Select above the grid. The frame is ruled by Guides. For personal planners, scheduling tools and any product that fits work into hours.
FAQ
How do I load my own tasks and meetings?
Replace TASKS (an id, a title and minutes, a multiple of 30) and FIXED (the blocks that can't move, with a start in minutes after midnight and a length). START lists the tasks already placed. The grid's opening hour, closing hour and step are the OPEN, CLOSE and STEP constants.
What stays local, and how do I save for real?
Everything. Picking, placing and removing change state on the page and nothing is sent anywhere, so the day resets when you reload. In your app write each placement from putAt and each removal from remove to your calendar or your own store.
How are overlaps handled?
Before a task is placed its start and length are checked against every fixed block and every placed task, and against the closing time. If it doesn't fit, nothing moves and the status line says why, for example "11:30 overlaps 'Team standup'". "Auto-place" scans the half hours from the top and uses the first one that fits.
How do I use it with a keyboard?
Tab to a task in the queue and press Enter or Space to pick it, then Tab to the grid and press a free slot ("Place at 11:00"). Focus then moves to the placed block's Remove button; removing a block moves focus back to its task in the queue. The grid and the queue are both scroll regions that can be focused.
Is it accessible?
The queue's tasks are toggle buttons with a pressed state, every slot is a button named with its time, placed blocks have a Remove button named after the task, and a single polite status line announces each result. Fixed blocks are marked by a lock and a hatched fill, not by color alone.