components / calendar-nav
calendar-nav.
period-navigation header: a day/month/year switcher plus prev / today / next controls. fully controlled, no router coupling.
June 2026
installation
bunx @justin06lee/chrome@latest add calendar-navprops
| name | type | default | description |
|---|---|---|---|
| label * | ReactNode | - | the current period label, e.g. "June 2026". |
| view | 'day' | 'month' | 'year' | - | controlled active view. |
| views | CalendarView[] | ['day', 'month', 'year'] | switcher hidden when fewer than 2. |
| onViewChange | (view: CalendarView) => void | - | |
| onPrev | () => void | - | |
| onNext | () => void | - | |
| onToday | () => void | - | |
| todayLabel | ReactNode | 'today' | |
| linkComponent | React.ElementType | - | pass your router's Link (e.g. next/link) to render prev/next/today + the view switcher as prefetched client-side links instead of callback buttons — much faster period-switching on server-rendered (force-dynamic) routes. Provide the *Href props too. |
| prevHref | string | - | href for the previous period (with linkComponent). |
| nextHref | string | - | href for the next period. |
| todayHref | string | - | href for the current period. |
| viewHref | (view: CalendarView) => string | - | maps a view to its href; each switcher segment becomes a prefetched link. |
| prefetch | boolean | - | forwarded to linkComponent (e.g. next/link's prefetch) for every control. |
| className | string | - |