Dates@knitui/dates

WeekdaysRow

WeekdaysRow is the localized weekday header for a calendar month — 7 labels (8 with withWeekNumbers) built from Box/Text (never an HTML <tr>/<th>), so it renders on web and native. Column width/font scale on the shared cell-metrics ladders so the header lines up with the Day grid. Reads locale/firstDayOfWeek from DatesProvider; offers per-slot styles sugar over its parts.

WebiOSAndroid2 style slots4 own props9 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

sizeWidth/font of the header columns.

localedayjs locale; falls back to DatesProvider.

firstDayOfWeekFirst weekday of the row, 0 (Sunday) … 6 (Saturday).

weekdayFormatdayjs format for weekday names.

withWeekNumbersRender a leading # heading for the week-number column.

false

fullWidthStretch columns to fill the row.

false

Playground

<WeekdaysRow
  size="md"
  withWeekNumbers={false}
  fullWidth={false}
/>

Examples

Default

Default Monday-first header row.

Loading example…

DefaultSource Storybook

Sunday First

Sunday-first ordering.

Loading example…

Sunday FirstSource Storybook

With Week Numbers

Leading # heading for the week-number column.

Loading example…

With Week NumbersSource Storybook

Localized

A non-default locale (Russian).

Loading example…

LocalizedSource Storybook

Full Names

Full weekday names via a custom dayjs format.

Loading example…

Full NamesSource Storybook

Full Width

Full-width header stretched to its container (aligns with a full-width Month).

Loading example…

Full WidthSource Storybook

Styled Slots

Per-slot styles sugar — recolour the weekday labels via the weekday slot.

Loading example…

Styled SlotsSource Storybook

Sizes

Every size token.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—
`firstDayOfWeek`	`DayOfWeek \| undefined` 0 · 1 · 2 · 3 · 4 · 5 · 6	`DatesProvider` (1)	First weekday of the row, 0 (Sunday) … 6 (Saturday).
`fullWidth` system	`boolean \| undefined`	`false`	Stretch columns to fill the row.
`locale`	`string \| undefined`	—	dayjs locale; falls back to DatesProvider.
`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 columns.
`styles` system	`SlotStyles<WeekdaysRowStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`weekdayFormat`	`DateLabelFormat \| undefined`	`'dd'`	dayjs format for weekday names.
`withWeekNumbers`	`boolean \| undefined`	`false`	Render a leading # heading for the week-number column.

Style slots

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

Slot	Usage
`weekday`	`styles={{ weekday: { … } }}`
`weekdaysRow`	`styles={{ weekdaysRow: { … } }}`

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.