Dates@knitui/dates

CalendarHeader

CalendarHeader is the prev / level-label / next bar that sits atop every calendar level. The level button zooms out a level while hasNextLevel is true, and becomes a static, dimmed label at the topmost level. Built from Box + UnstyledButton so it renders on web + native; accent comes from the active Tamagui theme. Use the styles prop to tweak individual parts.

WebiOSAndroid5 style slots15 own props9 examples

Stories Source Tests Open in Storybook

import { CalendarHeader } from "@knitui/dates";

Playground

Loading playground…

sizeWidth/font of the header controls.

labelLabel between the previous and next buttons.

hasNextLevelWhether the level button can zoom out to the next level.

true

withNextRender the next control.

true

withPreviousRender the previous control.

true

nextDisabledDisable the next control.

false

previousDisabledDisable the previous control.

false

fullWidthTake the full width of the container.

false

Playground

<CalendarHeader
  label="March 2024"
  size="md"
  hasNextLevel
  withNext
  withPrevious
  nextDisabled={false}
  previousDisabled={false}
  fullWidth={false}
  previousLabel="Previous"
  nextLabel="Next"
  levelControlAriaLabel="Change level"
/>

Examples

Default

The default month-level header (previous / level / next, all interactive).

Loading example…

DefaultSource Storybook

Top Level

Topmost level — the level control is a static, dimmed, non-interactive label.

Loading example…

Top LevelSource Storybook

Disabled Control

Bounded — the previous control is disabled (e.g. at minDate).

Loading example…

Disabled ControlSource Storybook

Full Width

Full-width header — the bar (and its level control) fill the container.

Loading example…

Full WidthSource Storybook

Custom Icons

Custom previous/next icons replace the default chevron glyphs.

Loading example…

Custom IconsSource Storybook

Reordered Controls

Reordered controls — level first, then previous / next.

Loading example…

Reordered ControlsSource Storybook

Styled Parts

Per-slot styles sugar — round the controls and recolor the level label.

Loading example…

Styled PartsSource Storybook

Sizes

Every size from the shared xxs…xxl cell-metrics ladder.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`label` required	`ReactNode`	`March 2024`	Label between the previous and next buttons.
`disabled` system	`boolean \| undefined`	—
`fullWidth` system	`boolean \| undefined`	`false`	Take the full width of the container.
`hasNextLevel`	`boolean \| undefined`	`true`	Whether the level button can zoom out to the next level.
`headerControlsOrder`	`CalendarHeaderControlName[] \| undefined`	`['previous', 'level', 'next']`	Order in which the controls are rendered.
`levelControlAriaLabel`	`string \| undefined`	`Change level`	Level control `aria-label`.
`nextDisabled`	`boolean \| undefined`	`false`	Disable the next control.
`nextIcon`	`ReactNode`	—	Replace the next-button icon.
`nextLabel`	`string \| undefined`	`Next`	Next button `aria-label`.
`onLevelClick`	`(() => void) \| undefined`	—	Called when the level button is pressed.
`onNext`	`(() => void) \| undefined`	—	Called when the next button is pressed.
`onPrevious`	`(() => void) \| undefined`	—	Called when the previous button is pressed.
`previousDisabled`	`boolean \| undefined`	`false`	Disable the previous control.
`previousIcon`	`ReactNode`	—	Replace the previous-button icon.
`previousLabel`	`string \| undefined`	`Previous`	Previous button `aria-label`.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`CalendarSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Width/font of the header controls.
`styles` system	`SlotStyles<CalendarHeaderStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`withNext`	`boolean \| undefined`	`true`	Render the next control.
`withPrevious`	`boolean \| undefined`	`true`	Render the previous control.

Style slots

Every part of CalendarHeader can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`control`	`styles={{ control: { … } }}`
`icon`	`styles={{ icon: { … } }}`
`level`	`styles={{ level: { … } }}`
`levelLabel`	`styles={{ levelLabel: { … } }}`
`root`	`styles={{ root: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.