Dates@knitui/dates

MiniCalendar

MiniCalendar is a standalone compact horizontal day strip (not a Calendar composition). It renders numberOfDays consecutive days from the displayed start date, with prev/next controls that page the window by a full strip and respect minDate / maxDate. Selecting a day commits it; each day is labelled with its month above the day number.

WebiOSAndroid6 style slots15 own props7 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

numberOfDaysNumber of days shown in the strip.

sizeWidth/font of the controls and day cells.

Playground

<MiniCalendar
  numberOfDays={7}
  size="md"
/>

Examples

Default

Default 7-day strip.

Loading example…

DefaultSource Storybook

Crossing Months

A longer 10-day window that crosses a month boundary (note the month labels).

Loading example…

Crossing MonthsSource Storybook

Bounded

Bounded — paging is blocked once the window would leave [minDate, maxDate].

Loading example…

BoundedSource Storybook

Styles Sugar

Per-slot styles sugar — recolour/round parts without composing them by hand.

Loading example…

Styles SugarSource Storybook

Theme Accent

Theme accent — theme="red" recolours the selected day with zero per-component logic.

Loading example…

Theme AccentSource Storybook

Sizes

Every size token.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`date`	`string \| Date \| undefined`	—	Displayed start date of the strip, controlled.
`defaultDate`	`string \| Date \| undefined`	—	Displayed start date of the strip, uncontrolled default.
`disabled` system	`boolean \| undefined`	—
`getDayProps`	`((date: DateStringValue) => MiniCalendarDayProps) \| undefined`	—	Props passed down to each day button (wins over `styles.day`).
`locale`	`string \| undefined`	—	dayjs locale used for formatting; falls back to `DatesProvider`.
`maxDate`	`string \| Date \| undefined`	—	Maximum selectable date, `YYYY-MM-DD` string or `Date`.
`minDate`	`string \| Date \| undefined`	—	Minimum selectable date, `YYYY-MM-DD` string or `Date`.
`monthLabelFormat`	`string \| undefined`	`'MMM'`	dayjs format string for the month label.
`nextControlProps`	`(Omit<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { disabled?: boolean \| undefined; shadow?: "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined; }>, keyof UnstyledButtonProps> & UnstyledButtonProps) \| undefined`	—	Props passed to the next control button (wins over `styles.control`).
`numberOfDays`	`number \| undefined`	`7`	Number of days shown in the strip.
`onChange`	`((date: DateStringValue) => void) \| undefined`	—	Called with the selected date in `YYYY-MM-DD` format when it changes.
`onDateChange`	`((date: DateStringValue) => void) \| undefined`	—	Called with the new start date in `YYYY-MM-DD` format when it changes.
`onNext`	`(() => void) \| undefined`	—	Called when the next button is pressed.
`onPrevious`	`(() => void) \| undefined`	—	Called when the previous button is pressed.
`previousControlProps`	`(Omit<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { disabled?: boolean \| undefined; shadow?: "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined; }>, keyof UnstyledButtonProps> & UnstyledButtonProps) \| undefined`	—	Props passed to the previous control button (wins over `styles.control`).
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`CalendarSize \| undefined` xs · sm · md · lg · xl	`'md'`	Width/font of the controls and day cells.
`styles` system	`SlotStyles<MiniCalendarStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`value`	`string \| Date \| null \| undefined`	—	Selected date, controlled.

Style slots

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

Slot	Usage
`control`	`styles={{ control: { … } }}`
`day`	`styles={{ day: { … } }}`
`dayMonth`	`styles={{ dayMonth: { … } }}`
`dayNumber`	`styles={{ dayNumber: { … } }}`
`days`	`styles={{ days: { … } }}`
`root`	`styles={{ root: { … } }}`

Accessibility & DOM props (2)

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

Plus 497 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.