Dates@knitui/dates
MonthLevelGroup
MonthLevelGroup renders numberOfColumns MonthLevel panels side by side inside a LevelsGroup, stepping one month per column over a day grid. It is the day-grid analogue of YearLevelGroup/DecadeLevelGroup and wires cross-platform arrow-key roving focus across every panel. Only the edge panels show navigation controls: withPrevious on the first, withNext on the last. It owns no cells of its own — sizing, colors and interaction live downstream in MonthLevel/Month/Day; per-day customization flows through the getDayProps callback.
import { MonthLevelGroup } from "@knitui/dates";Playground
Loading playground…
<MonthLevelGroup
month="2024-03-15"
/>Examples
Default
A single month panel (the default).
Loading example…
Two Columns
Two months side by side — one month apart, edge-only navigation controls.
Loading example…
Large
Larger cells via the shared size ladder.
Loading example…
Full Width
Stretched to the full width of its container.
Loading example…
Custom Label Format
A custom month label format via dayjs tokens.
Loading example…
Bounded
Bounded by minDate/maxDate: the previous/next controls disable at the bounds and out-of-range day cells are disabled (delegated to Month/Day).
Loading example…
Per Day Props
Per-day customization via getDayProps — the "explicit per-item beats sugar" callback (#7), forwarded to every panel. Here it disables the 15th.
Loading example…
Static
Static (non-interactive) display cells via the static prop.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
month required | string | 2024-03-15 | Month of the first (left-most) panel, 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 group (and its panels) to the full width of its 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 | ((month: DateStringValue) => string) | undefined | — | Level control `aria-label`, or a function resolving it from each panel's month. |
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 button `aria-label`. |
numberOfColumns | number | undefined | 1 | Number of month panels to display next to each other. |
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 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 | 'md' | Width/font of the header controls and day cells. |
static | boolean | undefined | false | Render days as static (non-interactive) display cells. |
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. |
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.