Calendar View Navbar Block for React

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.

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.

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.

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 renders the link with render, with nativeButton={false}.

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.

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.