First Day of Week Setting

ProNew

A setting for which day the week starts on, with Use my locale, Saturday, Sunday and Monday, and a live month preview that reorders its columns. Use this when users of a calendar or planner expect their week to start on the day they use.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when users of a calendar or planner expect their week to start on the day they use.

Do not use it to pick dates; use calendar-grid.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
value / defaultValue	"locale" \| 0 \| 1 \| 6	locale	Setting; `locale` follows the browser.
onValueChange	`(setting, firstDay: number) => void`	-	The setting and the day number it means.
locale / today	-	-	Locale and reference day.

Accessibility

The setting is a single-choice group; the preview calendar reflects it at once, and the column headers keep their full weekday names for screen readers.

Testing

The pattern ships with a Testing Library test (first-day-of-week-setting.test.tsx) that covers the locale default, each fixed day and the column order.