Dates@knitui/dates

MonthLevel

MonthLevel is the day-grid calendar level: a CalendarHeader (month label + prev/next/level controls) atop a Month day grid. A month zooms out to a year, so the level label stays interactive (onLevelClick). The prev/next controls auto-disable at the minDate/maxDate bounds, and the label honours monthLabelFormat + the DatesProvider locale. Use the styles prop to tweak the header parts and the grid.

WebiOSAndroid7 style slots32 own props8 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeWidth/font of the header controls and day cells.

monthA date within the displayed month (`YYYY-MM-DD`).

withNextRender the next control.

true

withPreviousRender the previous control.

true

fullWidthTake the full width of the container.

false

Playground

<MonthLevel
  month="2024-01-01"
  size="md"
  withNext
  withPrevious
  fullWidth={false}
  previousLabel="Previous month"
  nextLabel="Next month"
  levelControlAriaLabel="Month"
/>

Examples

Default

The default month level (header + the day grid).

Loading example…

DefaultSource Storybook

Custom Label

A function monthLabelFormat overrides the default MMMM YYYY label.

Loading example…

Custom LabelSource Storybook

Bounded

Bounded — minDate/maxDate auto-disable the prev/next controls at the edges.

Loading example…

BoundedSource Storybook

Static

Static display month — non-interactive day cells, no week labels needed.

Loading example…

StaticSource Storybook

Full Width

Full-width level — the header and grid fill the container.

Loading example…

Full WidthSource Storybook

Styled Parts

Per-slot styles sugar — round the header controls and recolor the 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
`month` required	`string`	`2024-01-01`	A date within the displayed month (`YYYY-MM-DD`).
`disabled` system	`boolean \| undefined`	—
`excludeDate`	`((date: DateStringValue) => boolean) \| undefined`	—	Predicate marking a day disabled.
`firstDayOfWeek`	`DayOfWeek \| undefined`	`DatesProvider` (1)	First weekday of each row, `0` (Sunday) … `6` (Saturday).
`fullWidth` system	`boolean \| undefined`	`false`	Take the full width of the container.
`getDayAriaLabel`	`((date: DateStringValue) => string) \| undefined`	—	Assigns each `Day` an `aria-label` based on its date.
`getDayProps`	`((date: DateStringValue) => Partial<DayProps>) \| undefined`	—	Passes props down to every `Day` (wins over `styles.day`).
`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.
`hideOutsideDates`	`boolean \| undefined`	`false`	Hide days outside the current month.
`hideWeekdays`	`boolean \| undefined`	`false`	Hide the weekday header row.
`highlightToday`	`boolean \| undefined`	`false`	Highlight today with a border.
`levelControlAriaLabel`	`string \| undefined`	`Month`	Level control `aria-label`.
`locale`	`string \| undefined`	—	dayjs locale; falls back to `DatesProvider`.
`maxDate`	`string \| Date \| undefined`	—	Maximum selectable date.
`minDate`	`string \| Date \| undefined`	—	Minimum selectable date.
`monthLabelFormat`	`DateLabelFormat \| undefined`	`'MMMM YYYY'`	dayjs format for the month label, or a function returning it.
`nextDisabled`	`boolean \| undefined`	`false`	Disables the next control.
`nextIcon`	`ReactNode`	—	Replace the next-button icon.
`nextLabel`	`string \| undefined`	`Next month`	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`	Disables the previous control.
`previousIcon`	`ReactNode`	—	Replace the previous-button icon.
`previousLabel`	`string \| undefined`	`Previous month`	Previous button `aria-label`.
`renderDay`	`RenderDay \| undefined`	—	Custom renderer for each day's content.
`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 and day cells.
`static`	`boolean \| undefined`	`false`	Render days as static (non-interactive) display cells.
`styles` system	`SlotStyles<MonthLevelStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching part (header + grid).
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`weekdayFormat`	`DateLabelFormat \| undefined`	`'dd'`	dayjs format for weekday names, or a custom renderer.
`weekendDays`	`DayOfWeek[] \| undefined`	`DatesProvider` ([0, 6])	Indices of weekend days.
`withCellSpacing`	`boolean \| undefined`	`true`	Separate cells/rows with spacing.
`withNext`	`boolean \| undefined`	`true`	Render the next control.
`withPrevious`	`boolean \| undefined`	`true`	Render the previous control.
`withWeekNumbers`	`boolean \| undefined`	`false`	Display a leading week-number column.

Style slots

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

Slot	Usage
`header`	`styles={{ header: { … } }}`
`headerControl`	`styles={{ headerControl: { … } }}`
`headerIcon`	`styles={{ headerIcon: { … } }}`
`headerLevel`	`styles={{ headerLevel: { … } }}`
`headerLevelLabel`	`styles={{ headerLevelLabel: { … } }}`
`month`	`styles={{ month: { … } }}`
`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.