Dates@knitui/dates

Month

Month is the calendar month day grid — a column of week rows built from Box/Text + Day + WeekdaysRow (never an HTML <table>), so it renders on web and native. Per-cell sizing/colour/interaction live in the Day leaf; Month lays out the rows/cells, shares size via context, and offers a per-day getDayProps passthrough plus per-slot styles sugar. Accent comes from the active Tamagui theme.

WebiOSAndroid6 style slots17 own props11 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeWidth/font of the grid cells.

withCellSpacingSeparate cells/rows with spacing.

true

hideOutsideDatesHide days outside the current month.

false

hideWeekdaysHide the weekday header row.

false

highlightTodayHighlight today with a border.

false

withWeekNumbersDisplay a leading week-number column.

false

fullWidthStretch the grid to its container width.

false

staticRender days as non-interactive display cells.

false

Playground

<Month
  month="2026-06-15"
  size="md"
  withCellSpacing
  hideOutsideDates={false}
  hideWeekdays={false}
  highlightToday={false}
  withWeekNumbers={false}
  fullWidth={false}
  static={false}
/>

Examples

Default

Default month grid with a selected day.

Loading example…

DefaultSource Storybook

Hide Outside Dates

Outside days hidden — the trailing/leading adjacent-month cells disappear.

Loading example…

Hide Outside DatesSource Storybook

Highlight Today

Today highlighted with a border (uses the real current date).

Loading example…

Highlight TodaySource Storybook

With Week Numbers

Leading week-number column.

Loading example…

With Week NumbersSource Storybook

Bounded

Bounded — days outside [minDate, maxDate] are disabled.

Loading example…

BoundedSource Storybook

Static Display

Static (display-only) grid — no interactive day buttons.

Loading example…

Static DisplaySource Storybook

Full Width

Full-width grid stretched to its container's width (day cells share the row equally).

Loading example…

Full WidthSource Storybook

Full Width Filled

fullWidth fills BOTH axes: in a container with a fixed height the week rows distribute the extra vertical space and the day cells grow taller to fill it.

Loading example…

Full Width FilledSource Storybook

Styled Slots

Per-slot styles sugar — recolour the week-number labels via the weekNumberLabel slot.

Loading example…

Styled SlotsSource Storybook

Sizes

Every size token.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`month` required	`string`	`2026-06-15`	Month to display, any date within it, `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`	Stretch the grid to its container width.
`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`).
`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.
`locale`	`string \| undefined`	—	dayjs locale; falls back to `DatesProvider`.
`maxDate`	`string \| Date \| undefined`	—	Maximum selectable date.
`minDate`	`string \| Date \| undefined`	—	Minimum selectable date.
`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 grid cells.
`static`	`boolean \| undefined`	`false`	Render days as non-interactive display cells.
`styles` system	`SlotStyles<MonthStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part. Lives on `MonthProps` (not the inherited `MonthSettings`) so Month's `styles` shape does not flow up the shared Calendar settings chain and collide with sibling components' own `styles` props.
`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.
`withWeekNumbers`	`boolean \| undefined`	`false`	Display a leading week-number column.

Style slots

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

Slot	Usage
`cell`	`styles={{ cell: { … } }}`
`day`	`styles={{ day: { … } }}`
`root`	`styles={{ root: { … } }}`
`row`	`styles={{ row: { … } }}`
`weekNumber`	`styles={{ weekNumber: { … } }}`
`weekNumberLabel`	`styles={{ weekNumberLabel: { … } }}`

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.