shadcn.io is not affiliated with official shadcn/ui
Calendar View Navbar Block for Solid
A calendar navbar for a shared scheduling app that moves a day, week, month or agenda label with Today, previous and next.
Installation
Overview
A calendar navbar for Solid with Ark UI, the bar of Hourfold, a shared calendar. Previous and next step the range, Today jumps to the current day, and a segment (Day, Week, Month, Agenda) changes how the range is written: a weekday and date, a Monday-to-Sunday week, a month and year, or a two-week agenda. The label is filled in after mount from the visitor's clock, so the server and the first paint both say Today, and a hidden line reserves the width of the longest range so the bar doesn't jump. T is the shortcut for Today. New event is the Shine Button, a link to #new-event. On a phone the segment becomes a native select and the words hide. The page's rails and top rule come from the Guides spine, and interior hairlines meet that rule with a plus. The block stays 56 pixels high. It's built from Segment Group, Native Select, Button, Shine Button, Kbd and Guides. For calendars and scheduling tools whose header is the date control.
FAQ
Where does the date come from, and can I set a fixed one?
The first paint says Today, with no clock read, so server and client markup match. After mount an effect takes the local year, month and day and writes the range for the current view. Nothing in the file is a typed date. To open on a known day, set anchor yourself after you know it and skip that effect. Week ranges start on Monday. Stepping a month clamps to the last day of the month, so the 31st doesn't spill into the next one.
How do the four views change the label?
Day writes the weekday and the date. Week writes the Monday-to-Sunday range, and names both months when the week crosses one. Month writes the month and the year. Agenda writes the fourteen days that start on the anchor. Previous and next move by one day, one week, one month or two weeks. The buttons' names follow the view ("Previous week", "Next month"). Changing the view keeps the anchor and rewrites the label.
How does the view control work with a keyboard?
From the md breakpoint the views are a segment group named Calendar view.
The arrow keys move to a view and choose it.
Below md the same choice is a native select, which behaves like any select on that platform. T jumps to today from anywhere that isn't a text field. Previous, next, Today and New event follow in the tab order.
How do I point New event at a real composer?
New event is a link to #new-event. Point that href at your composer. It does not create an event in this demo.
The Shine Button's asChild receives its props: spread them onto your router's link.
How does it fit on a phone?
Below md the segment is hidden and a native select shows the same four views. Below sm the wordmark is its icon, Today is an icon with the word kept for screen readers (both hide under 23 rem, about 368 px, to make room; the t key still works), and New event is an icon. The range is written with three-letter month and weekday names (Oct 12–18) and truncates only if a range that crosses a month still doesn't fit; a screen reader gets the full string. The key hint on Today shows from lg. Nothing wraps. The bar is 56 pixels at every width.
What moves, and what happens with reduced motion?
Nothing moves on load. Stepping the range replaces the text in a cell whose width is reserved from the sm breakpoint, so the row doesn't shift. A band of light sweeps across New event once on hover and keyboard focus. With reduced motion that light fades in where it stands.