shadcn.io is not affiliated with official shadcn/ui
Date Picker Header Sidebar Block for Vue
A day planner in a fixed-height window: a calendar in the wide rail with a dot on days that have plans, the chosen day's agenda under it, and Schedule, Timeline and Agenda views of that day.
Installation
Overview
Put the date picker where the navigation is with this date picker header sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar at a wider width: the product's mark, the Calendar at its own small size with a dot under every day that has something planned, the chosen day's agenda in up to three lines and then a count, three views of the day (Schedule, Timeline and Agenda) and the signed-in person at the foot. Beside it, a top bar names the chosen day and holds Add item, a Shine Button and the only colored control. Choosing a day lists its plans in the rail and redraws the page: Schedule shows the items with the free time between them, Timeline draws a bar as long as each item, and Agenda groups them into morning, afternoon and evening. A day with nothing in it shows an Empty state with a way to the next day that has plans. The rail collapses to the three view icons with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Calendar, Empty, Avatar, Button, Shine Button and Guides, with a CSS entrance only. For planners, schedules, booking tools and any app where a date chooses what the page shows.
FAQ
Why is no day marked as today?
Because the demo never reads the clock. "Now" is a constant in the file (Wednesday 14 October 2026), so the demo looks the same whenever it loads, and the catalog Calendar's own today marker is switched off. In your app, let the calendar mark the real today and pass your own plans to the dots.
Where do the dots and the agenda come from?
From PLANS, the typed list at the top of the file: a day with items in it gets a dot, the rail lists up to three of them, and the page and the status line count the same items. Nothing is typed twice. Add item puts an untitled half-hour in the first free slot of the working day (08:00 to 18:00) and the rail, the page and the count follow; on a day with no plan it says so instead of inventing one.
What stays in the page, and how do I connect it?
Everything. The plans are typed in the block, nothing is saved or synced, and reloading starts over. Replace the handlers with your API: read the plans for the visible month from your server and write the new item back. The views are links to # whose handler redraws the page.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Escape closes it and focus goes back to the menu button. The calendar and the agenda live in the sheet, so the status line at the foot of the window states the live result ("Thu 15 Oct: 5 items, 6 h 15 min booked."), and choosing a view closes the sheet.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to its icons. The calendar and the agenda have no folded form, so they give way to the three view icons, each with a tooltip. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product, and the open view is marked as the current page. Every day button in the calendar is named with its date and how much is planned ("Thursday 15 October, has plans"); the dots are decoration. The page is a labelled scrollable region reachable with Tab, one polite status line reports each change, and times and dates are isolated so they read right in a right-to-left layout.