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.
import { WeekdaysRow } from "@knitui/dates";Playground
Loading playground…
<WeekdaysRow
size="md"
withWeekNumbers={false}
fullWidth={false}
/>Examples
Default
Default Monday-first header row.
Loading example…
Sunday First
Sunday-first ordering.
Loading example…
With Week Numbers
Leading # heading for the week-number column.
Loading example…
Localized
A non-default locale (Russian).
Loading example…
Full Names
Full weekday names via a custom dayjs format.
Loading example…
Full Width
Full-width header stretched to its container (aligns with a full-width Month).
Loading example…
Styled Slots
Per-slot styles sugar — recolour the weekday labels via the weekday slot.
Loading example…
Sizes
Every size token.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled system | boolean | undefined | — | — |
firstDayOfWeek | DayOfWeek | undefined0 · 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 | undefinedxxs · 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 | Targets |
|---|---|
weekday | Props for each weekday label cell (.Weekday). |
weekdaysRow | Props for the header row (.Frame). |
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.