Repository: melt-ui/melt-ui
Pull request #784 (2023-12-01 00:30:51)

Rename `daysOfWeek` to `weekdays` & add `weekdayFormat` prop
### Breaking Change
**Calendar**, **Range Calendar**, **Date Picker**, and **Date Range Picker**:
- Rename the `daysOfWeek` state store returned from the builders to `weekdays`

### Improvements
**Calendar**, **Range Calendar**, **Date Picker**, and **Date Range Picker**:
- Add a `weekdayFormat` prop to the calendar builders which allows users to specify how the weekdays should be formatted based on the `Int.DateTimeFormat` [options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday)

Closes: #782

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 8cf05243b9d2e5d9243f60fa8a59dc31d34e3d3f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/huntabyte/melt-ui/new/feat/782?filename=.changeset/khaki-dryers-promise.md&value=---%0A%22%40melt-ui%2Fsvelte%22%3A%20patch%0A---%0A%0ARename%20%60daysOfWeek%60%20to%20%60weekdays%60%20%26%20add%20%60weekdayFormat%60%20prop%0A)



Patch:
diff --git a/.changeset/khaki-dryers-promise.md b/.changeset/khaki-dryers-promise.md
new file mode 100644
index 00000000..60eeafd5
--- /dev/null
+++ b/.changeset/khaki-dryers-promise.md
@@ -0,0 +1,7 @@
+---
+"@melt-ui/svelte": minor
+---
+
+- Calendars & Date Pickers: rename `daysOfWeek` to `weekdays` and add `weekdayFormat` prop (closes #782)
+
+
diff --git a/src/docs/content/builders/calendar.md b/src/docs/content/builders/calendar.md
index ed833506..65b24048 100644
--- a/src/docs/content/builders/calendar.md
+++ b/src/docs/content/builders/calendar.md
@@ -45,7 +45,7 @@ we go.
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createCalendar()
 </script>
@@ -60,7 +60,7 @@ elements will be contained within it.
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createCalendar()
 </script>
@@ -79,7 +79,7 @@ buttons (`prevButton` & `nextButton`).
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createCalendar()
 </script>
@@ -143,8 +143,8 @@ export type Month = {
 
 Since we're taking the recommended approach of rendering the calendar grid using a table, we'll be
 using the `weeks` property of each month to render the rows of the table. We'll also use the
-`daysOfWeek` state to render the column headers of the table, which is an array of formatted day
-names according to the `locale` prop.
+`weekdays` state to render the column headers of the table, which is an array of formatted day names
+according to the `locale` prop.
 
 ```svelte showLineNumbers {19-29}
 <script lang="ts">
@@ -152,7 +152,7 @@ names according to the `locale` prop.
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createCalendar()
 </script>
@@ -169,7 +169,7 @@ names according to the `locale` prop.
 		<table use:melt={$grid}>
 			<thead aria-hidden="true">
 				<tr>
-					{#each $daysOfWeek as day}
+					{#each $weekdays as day}
 						<th>{day}</th>
 					{/each}
 				</tr>
@@ -190,7 +190,7 @@ Now we can finish off the calendar by rendering the weeks and days within each w
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createCalendar()
 </script>
@@ -207,7 +207,7 @@ Now we can finish off the calendar by rendering the weeks and days within each w
 		<table use:melt={$grid}>
 			<thead aria-hidden="true">
 				<tr>
-					{#each $daysOfWeek as day}
+					{#each $weekdays as day}
 						<th>{day}</th>
 					{/each}
 				</tr>
diff --git a/src/docs/content/builders/date-picker.md b/src/docs/content/builders/date-picker.md
index 529fe3be..e460744d 100644
--- a/src/docs/content/builders/date-picker.md
+++ b/src/docs/content/builders/date-picker.md
@@ -68,7 +68,7 @@ the pieces we need:
 			segment,
 			trigger
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents },
+		states: { months, headingValue, weekdays, segmentContents },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createDatePicker()
 </script>
@@ -128,7 +128,7 @@ Once that's in place, we can setup our calendar, which will be contained within
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								{$day}
 							</th>
diff --git a/src/docs/content/builders/date-range-picker.md b/src/docs/content/builders/date-range-picker.md
index 22eb8034..c101164a 100644
--- a/src/docs/content/builders/date-range-picker.md
+++ b/src/docs/content/builders/date-range-picker.md
@@ -73,7 +73,7 @@ destructuring the pieces we need:
 			endSegment,
 			trigger
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents },
+		states: { months, headingValue, weekdays, segmentContents },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createDateRangePicker()
 </script>
@@ -145,7 +145,7 @@ Once that's in place, we can setup our calendar, which will be contained within
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								{$day}
 							</th>
diff --git a/src/docs/content/builders/range-calendar.md b/src/docs/content/builders/range-calendar.md
index 0f9c87e9..5b9bb5a1 100644
--- a/src/docs/content/builders/range-calendar.md
+++ b/src/docs/content/builders/range-calendar.md
@@ -45,7 +45,7 @@ more detail as we go.
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createRangeCalendar()
 </script>
@@ -60,7 +60,7 @@ elements will be contained within it.
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createRangeCalendar()
 </script>
@@ -79,7 +79,7 @@ buttons (`prevButton` & `nextButton`).
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createRangeCalendar()
 </script>
@@ -143,8 +143,8 @@ export type Month = {
 
 Since we're taking the recommended approach of rendering the calendar grid using a table, we'll be
 using the `weeks` property of each month to render the rows of the table. We'll also use the
-`daysOfWeek` state to render the column headers of the table, which is an array of formatted day
-names according to the `locale` prop.
+`weekdays` state to render the column headers of the table, which is an array of formatted day names
+according to the `locale` prop.
 
 ```svelte showLineNumbers {19-29}
 <script lang="ts">
@@ -152,7 +152,7 @@ names according to the `locale` prop.
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createRangeCalendar()
 </script>
@@ -169,7 +169,7 @@ names according to the `locale` prop.
 		<table use:melt={$grid}>
 			<thead aria-hidden="true">
 				<tr>
-					{#each $daysOfWeek as day}
+					{#each $weekdays as day}
 						<th>{day}</th>
 					{/each}
 				</tr>
@@ -190,7 +190,7 @@ Now we can finish off the calendar by rendering the weeks and days within each w
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = createRangeCalendar()
 </script>
@@ -207,7 +207,7 @@ Now we can finish off the calendar by rendering the weeks and days within each w
 		<table use:melt={$grid}>
 			<thead aria-hidden="true">
 				<tr>
-					{#each $daysOfWeek as day}
+					{#each $weekdays as day}
 						<th>{day}</th>
 					{/each}
 				</tr>
diff --git a/src/docs/data/builders/calendar.ts b/src/docs/data/builders/calendar.ts
index ce3a10a4..956d2cb5 100644
--- a/src/docs/data/builders/calendar.ts
+++ b/src/docs/data/builders/calendar.ts
@@ -179,7 +179,7 @@ const builder = builderSchema(BUILDER_NAME, {
 			description: 'A readable store containing month objects for each month in the calendar.',
 		},
 		{
-			name: 'daysOfWeek',
+			name: 'weekdays',
 			type: 'Readable<string[]>',
 			description:
 				'A readable store containing the days of the week, formatted to the  `locale` prop.',
diff --git a/src/docs/data/builders/date-picker.ts b/src/docs/data/builders/date-picker.ts
index 1dcfc18f..56ed1480 100644
--- a/src/docs/data/builders/date-picker.ts
+++ b/src/docs/data/builders/date-picker.ts
@@ -181,7 +181,7 @@ const builder = builderSchema(BUILDER_NAME, {
 			description: 'A readable store containing month objects for each month in the calendar.',
 		},
 		{
-			name: 'daysOfWeek',
+			name: 'weekdays',
 			type: 'Readable<string[]>',
 			description:
 				'A readable store containing the days of the week, formatted to the  `locale` prop.',
diff --git a/src/docs/data/builders/date-range-picker.ts b/src/docs/data/builders/date-range-picker.ts
index 493e6ed2..9dc021b4 100644
--- a/src/docs/data/builders/date-range-picker.ts
+++ b/src/docs/data/builders/date-range-picker.ts
@@ -183,7 +183,7 @@ const builder = builderSchema(BUILDER_NAME, {
 			description: 'A readable store containing month objects for each month in the calendar.',
 		},
 		{
-			name: 'daysOfWeek',
+			name: 'weekdays',
 			type: 'Readable<string[]>',
 			description:
 				'A readable store containing the days of the week, formatted to the  `locale` prop.',
diff --git a/src/docs/data/builders/range-calendar.ts b/src/docs/data/builders/range-calendar.ts
index 27fa925b..846826f1 100644
--- a/src/docs/data/builders/range-calendar.ts
+++ b/src/docs/data/builders/range-calendar.ts
@@ -173,7 +173,7 @@ const builder = builderSchema(BUILDER_NAME, {
 			description: 'A readable store containing month objects for each month in the calendar.',
 		},
 		{
-			name: 'daysOfWeek',
+			name: 'weekdays',
 			type: 'Readable<string[]>',
 			description:
 				'A readable store containing the days of the week, formatted to the  `locale` prop.',
diff --git a/src/docs/previews/calendar/changePh/tailwind/index.svelte b/src/docs/previews/calendar/changePh/tailwind/index.svelte
index 85b9c8b8..467299f8 100644
--- a/src/docs/previews/calendar/changePh/tailwind/index.svelte
+++ b/src/docs/previews/calendar/changePh/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		defaultPlaceholder: new CalendarDate(2021, 2, 1),
@@ -29,7 +29,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/changeValue/tailwind/index.svelte b/src/docs/previews/calendar/changeValue/tailwind/index.svelte
index 30ec0263..79c8d2a5 100644
--- a/src/docs/previews/calendar/changeValue/tailwind/index.svelte
+++ b/src/docs/previews/calendar/changeValue/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		defaultValue: new CalendarDate(2024, 1, 11),
@@ -29,7 +29,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/disabled/tailwind/index.svelte b/src/docs/previews/calendar/disabled/tailwind/index.svelte
index a240359c..a6b93356 100644
--- a/src/docs/previews/calendar/disabled/tailwind/index.svelte
+++ b/src/docs/previews/calendar/disabled/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		isDateDisabled: (date) => {
@@ -30,7 +30,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/fixedWeeks/tailwind/index.svelte b/src/docs/previews/calendar/fixedWeeks/tailwind/index.svelte
index 38e7e37b..fe818f16 100644
--- a/src/docs/previews/calendar/fixedWeeks/tailwind/index.svelte
+++ b/src/docs/previews/calendar/fixedWeeks/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		defaultPlaceholder: new CalendarDate(2021, 2, 14),
@@ -30,7 +30,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/limitSelectedA/tailwind/index.svelte b/src/docs/previews/calendar/limitSelectedA/tailwind/index.svelte
index fab1e9da..a44f81ba 100644
--- a/src/docs/previews/calendar/limitSelectedA/tailwind/index.svelte
+++ b/src/docs/previews/calendar/limitSelectedA/tailwind/index.svelte
@@ -10,7 +10,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		defaultValue,
@@ -43,7 +43,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/limitSelectedB/tailwind/index.svelte b/src/docs/previews/calendar/limitSelectedB/tailwind/index.svelte
index 08bb2833..4dbfdf24 100644
--- a/src/docs/previews/calendar/limitSelectedB/tailwind/index.svelte
+++ b/src/docs/previews/calendar/limitSelectedB/tailwind/index.svelte
@@ -10,7 +10,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		defaultValue,
@@ -43,7 +43,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/locale/tailwind/index.svelte b/src/docs/previews/calendar/locale/tailwind/index.svelte
index 361f0d44..2917b496 100644
--- a/src/docs/previews/calendar/locale/tailwind/index.svelte
+++ b/src/docs/previews/calendar/locale/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		locale: 'de',
@@ -28,7 +28,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/main/tailwind/index.svelte b/src/docs/previews/calendar/main/tailwind/index.svelte
index df04fcba..0f742e24 100644
--- a/src/docs/previews/calendar/main/tailwind/index.svelte
+++ b/src/docs/previews/calendar/main/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 		options: { locale },
 	} = createCalendar();
@@ -37,7 +37,7 @@
 				<table use:melt={$grid}>
 					<thead aria-hidden="true">
 						<tr>
-							{#each $daysOfWeek as day}
+							{#each $weekdays as day}
 								<th>
 									<div>
 										{day}
diff --git a/src/docs/previews/calendar/minMax/tailwind/index.svelte b/src/docs/previews/calendar/minMax/tailwind/index.svelte
index 53b7940f..26651182 100644
--- a/src/docs/previews/calendar/minMax/tailwind/index.svelte
+++ b/src/docs/previews/calendar/minMax/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		defaultPlaceholder: new CalendarDate(2023, 1, 25),
@@ -31,7 +31,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/monthSelect/tailwind/index.svelte b/src/docs/previews/calendar/monthSelect/tailwind/index.svelte
index 30f4c6e7..4e56c9ed 100644
--- a/src/docs/previews/calendar/monthSelect/tailwind/index.svelte
+++ b/src/docs/previews/calendar/monthSelect/tailwind/index.svelte
@@ -7,7 +7,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek, placeholder },
+		states: { months, headingValue, weekdays, placeholder },
 		helpers: { isDateDisabled, isDateUnavailable, setMonth },
 	} = createCalendar({
 		fixedWeeks: true,
@@ -48,7 +48,7 @@
 				<table use:melt={$grid}>
 					<thead aria-hidden="true">
 						<tr>
-							{#each $daysOfWeek as day}
+							{#each $weekdays as day}
 								<th>
 									<div>
 										{day}
diff --git a/src/docs/previews/calendar/multipleMonths/tailwind/index.svelte b/src/docs/previews/calendar/multipleMonths/tailwind/index.svelte
index e7bed8e2..af22c9cf 100644
--- a/src/docs/previews/calendar/multipleMonths/tailwind/index.svelte
+++ b/src/docs/previews/calendar/multipleMonths/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		numberOfMonths: 2,
@@ -28,7 +28,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/multipleSelect/tailwind/index.svelte b/src/docs/previews/calendar/multipleSelect/tailwind/index.svelte
index f5e96e28..a37a7e00 100644
--- a/src/docs/previews/calendar/multipleSelect/tailwind/index.svelte
+++ b/src/docs/previews/calendar/multipleSelect/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		defaultPlaceholder: new CalendarDate(2023, 10, 1),
@@ -30,7 +30,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/pagedNav/tailwind/index.svelte b/src/docs/previews/calendar/pagedNav/tailwind/index.svelte
index 51a77df4..9c9ae12e 100644
--- a/src/docs/previews/calendar/pagedNav/tailwind/index.svelte
+++ b/src/docs/previews/calendar/pagedNav/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		numberOfMonths: 2,
@@ -30,7 +30,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/preventDeselect/tailwind/index.svelte b/src/docs/previews/calendar/preventDeselect/tailwind/index.svelte
index ab708863..660b20c5 100644
--- a/src/docs/previews/calendar/preventDeselect/tailwind/index.svelte
+++ b/src/docs/previews/calendar/preventDeselect/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		preventDeselect: true,
@@ -30,7 +30,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/reactToVal/tailwind/index.svelte b/src/docs/previews/calendar/reactToVal/tailwind/index.svelte
index 35230224..ebed2c78 100644
--- a/src/docs/previews/calendar/reactToVal/tailwind/index.svelte
+++ b/src/docs/previews/calendar/reactToVal/tailwind/index.svelte
@@ -7,7 +7,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek, value },
+		states: { months, headingValue, weekdays, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		defaultPlaceholder: new CalendarDate(2023, 10, 1),
@@ -35,7 +35,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/calendar/unavailable/tailwind/index.svelte b/src/docs/previews/calendar/unavailable/tailwind/index.svelte
index 5df0c176..ff3dfcd7 100644
--- a/src/docs/previews/calendar/unavailable/tailwind/index.svelte
+++ b/src/docs/previews/calendar/unavailable/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createCalendar({
 		isDateUnavailable: (date) => {
@@ -31,7 +31,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/date-picker/defaultPh/tailwind/index.svelte b/src/docs/previews/date-picker/defaultPh/tailwind/index.svelte
index 0c56c202..61121840 100644
--- a/src/docs/previews/date-picker/defaultPh/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/defaultPh/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -61,7 +61,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/defaultValue/tailwind/index.svelte b/src/docs/previews/date-picker/defaultValue/tailwind/index.svelte
index 58d5f381..27a3c5d1 100644
--- a/src/docs/previews/date-picker/defaultValue/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/defaultValue/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -61,7 +61,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/disabled/tailwind/index.svelte b/src/docs/previews/date-picker/disabled/tailwind/index.svelte
index e5ecbd2a..1995f32d 100644
--- a/src/docs/previews/date-picker/disabled/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/disabled/tailwind/index.svelte
@@ -17,7 +17,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -64,7 +64,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/fixedWeeks/tailwind/index.svelte b/src/docs/previews/date-picker/fixedWeeks/tailwind/index.svelte
index edb76af8..8d23e9f4 100644
--- a/src/docs/previews/date-picker/fixedWeeks/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/fixedWeeks/tailwind/index.svelte
@@ -17,7 +17,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -61,7 +61,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/locale/tailwind/index.svelte b/src/docs/previews/date-picker/locale/tailwind/index.svelte
index ab5e202a..b6e056b0 100644
--- a/src/docs/previews/date-picker/locale/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/locale/tailwind/index.svelte
@@ -17,7 +17,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -62,7 +62,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/main/tailwind/index.svelte b/src/docs/previews/date-picker/main/tailwind/index.svelte
index 7cc5bc68..33223dc9 100644
--- a/src/docs/previews/date-picker/main/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/main/tailwind/index.svelte
@@ -19,7 +19,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 		options: { locale },
 	} = createDatePicker({
@@ -73,7 +73,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/minMax/tailwind/index.svelte b/src/docs/previews/date-picker/minMax/tailwind/index.svelte
index 3944dbcd..b52c6b37 100644
--- a/src/docs/previews/date-picker/minMax/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/minMax/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -65,7 +65,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/multipleMonths/tailwind/index.svelte b/src/docs/previews/date-picker/multipleMonths/tailwind/index.svelte
index 2c622af1..c4253934 100644
--- a/src/docs/previews/date-picker/multipleMonths/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/multipleMonths/tailwind/index.svelte
@@ -17,7 +17,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -62,7 +62,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/pagedNav/tailwind/index.svelte b/src/docs/previews/date-picker/pagedNav/tailwind/index.svelte
index 5225edcf..ab19c48b 100644
--- a/src/docs/previews/date-picker/pagedNav/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/pagedNav/tailwind/index.svelte
@@ -17,7 +17,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -63,7 +63,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/preventDeselect/tailwind/index.svelte b/src/docs/previews/date-picker/preventDeselect/tailwind/index.svelte
index aa6c3e3d..c7fa9378 100644
--- a/src/docs/previews/date-picker/preventDeselect/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/preventDeselect/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -64,7 +64,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/unavailable/tailwind/index.svelte b/src/docs/previews/date-picker/unavailable/tailwind/index.svelte
index 4ec9f2d8..7b09c773 100644
--- a/src/docs/previews/date-picker/unavailable/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/unavailable/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -65,7 +65,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-picker/usingValue/tailwind/index.svelte b/src/docs/previews/date-picker/usingValue/tailwind/index.svelte
index 633dd937..52c7e7ed 100644
--- a/src/docs/previews/date-picker/usingValue/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/usingValue/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			segment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDatePicker({
 		forceVisible: true,
@@ -62,7 +62,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/defaultPh/tailwind/index.svelte b/src/docs/previews/date-range-picker/defaultPh/tailwind/index.svelte
index 553552b3..f13e941a 100644
--- a/src/docs/previews/date-range-picker/defaultPh/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/defaultPh/tailwind/index.svelte
@@ -19,7 +19,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -68,7 +68,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/defaultValue/tailwind/index.svelte b/src/docs/previews/date-range-picker/defaultValue/tailwind/index.svelte
index 526a3044..e03d6123 100644
--- a/src/docs/previews/date-range-picker/defaultValue/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/defaultValue/tailwind/index.svelte
@@ -19,7 +19,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -71,7 +71,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/disabled/tailwind/index.svelte b/src/docs/previews/date-range-picker/disabled/tailwind/index.svelte
index bbe4c4cf..8acf3567 100644
--- a/src/docs/previews/date-range-picker/disabled/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/disabled/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -69,7 +69,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/fixedWeeks/tailwind/index.svelte b/src/docs/previews/date-range-picker/fixedWeeks/tailwind/index.svelte
index a356244b..2e582f8e 100644
--- a/src/docs/previews/date-range-picker/fixedWeeks/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/fixedWeeks/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -67,7 +67,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/locale/tailwind/index.svelte b/src/docs/previews/date-range-picker/locale/tailwind/index.svelte
index 097c90fe..44754b4c 100644
--- a/src/docs/previews/date-range-picker/locale/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/locale/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -67,7 +67,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/main/tailwind/index.svelte b/src/docs/previews/date-range-picker/main/tailwind/index.svelte
index 5a576d4f..436213e2 100644
--- a/src/docs/previews/date-range-picker/main/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/main/tailwind/index.svelte
@@ -20,7 +20,7 @@
 			content,
 			label,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		options: { locale },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
@@ -81,7 +81,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/minMax/tailwind/index.svelte b/src/docs/previews/date-range-picker/minMax/tailwind/index.svelte
index 8699aada..b5747f43 100644
--- a/src/docs/previews/date-range-picker/minMax/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/minMax/tailwind/index.svelte
@@ -19,7 +19,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -70,7 +70,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/multipleMonths/tailwind/index.svelte b/src/docs/previews/date-range-picker/multipleMonths/tailwind/index.svelte
index d74f83ff..a4ce62b8 100644
--- a/src/docs/previews/date-range-picker/multipleMonths/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/multipleMonths/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -68,7 +68,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/pagedNav/tailwind/index.svelte b/src/docs/previews/date-range-picker/pagedNav/tailwind/index.svelte
index 09e8a658..b48e3b18 100644
--- a/src/docs/previews/date-range-picker/pagedNav/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/pagedNav/tailwind/index.svelte
@@ -18,7 +18,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -69,7 +69,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/unavailable/tailwind/index.svelte b/src/docs/previews/date-range-picker/unavailable/tailwind/index.svelte
index 836c9f3c..bd0b0ffb 100644
--- a/src/docs/previews/date-range-picker/unavailable/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/unavailable/tailwind/index.svelte
@@ -19,7 +19,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open },
+		states: { months, headingValue, weekdays, segmentContents, open },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -70,7 +70,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/date-range-picker/usingValue/tailwind/index.svelte b/src/docs/previews/date-range-picker/usingValue/tailwind/index.svelte
index 665e93b0..400fbbe2 100644
--- a/src/docs/previews/date-range-picker/usingValue/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/usingValue/tailwind/index.svelte
@@ -19,7 +19,7 @@
 			endSegment,
 			trigger,
 		},
-		states: { months, headingValue, daysOfWeek, segmentContents, open, value },
+		states: { months, headingValue, weekdays, segmentContents, open, value },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createDateRangePicker({
 		forceVisible: true,
@@ -72,7 +72,7 @@
 						<table use:melt={$grid}>
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day}
+									{#each $weekdays as day}
 										<th>
 											<div>
 												{day}
diff --git a/src/docs/previews/range-calendar/changePh/tailwind/index.svelte b/src/docs/previews/range-calendar/changePh/tailwind/index.svelte
index 321a1d2b..a88e5ce4 100644
--- a/src/docs/previews/range-calendar/changePh/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/changePh/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		defaultPlaceholder: new CalendarDate(2021, 2, 1),
@@ -29,7 +29,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/range-calendar/changeValue/tailwind/index.svelte b/src/docs/previews/range-calendar/changeValue/tailwind/index.svelte
index 74e60f6d..e648b7b8 100644
--- a/src/docs/previews/range-calendar/changeValue/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/changeValue/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		defaultValue: {
@@ -32,7 +32,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/range-calendar/disabled/tailwind/index.svelte b/src/docs/previews/range-calendar/disabled/tailwind/index.svelte
index ca0fbfe7..5d20a768 100644
--- a/src/docs/previews/range-calendar/disabled/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/disabled/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		fixedWeeks: true,
@@ -31,7 +31,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/range-calendar/fixedWeeks/tailwind/index.svelte b/src/docs/previews/range-calendar/fixedWeeks/tailwind/index.svelte
index a627eafb..52446890 100644
--- a/src/docs/previews/range-calendar/fixedWeeks/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/fixedWeeks/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		fixedWeeks: true,
@@ -28,7 +28,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/range-calendar/locale/tailwind/index.svelte b/src/docs/previews/range-calendar/locale/tailwind/index.svelte
index de1f989a..d94bf7c7 100644
--- a/src/docs/previews/range-calendar/locale/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/locale/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		fixedWeeks: true,
@@ -29,7 +29,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/range-calendar/main/tailwind/index.svelte b/src/docs/previews/range-calendar/main/tailwind/index.svelte
index 984e6c0e..af3db799 100644
--- a/src/docs/previews/range-calendar/main/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/main/tailwind/index.svelte
@@ -6,7 +6,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 		options: { locale },
 	} = createRangeCalendar();
@@ -38,7 +38,7 @@
 				<table use:melt={$grid}>
 					<thead aria-hidden="true">
 						<tr>
-							{#each $daysOfWeek as day}
+							{#each $weekdays as day}
 								<th>
 									<div>
 										{day}
diff --git a/src/docs/previews/range-calendar/minMax/tailwind/index.svelte b/src/docs/previews/range-calendar/minMax/tailwind/index.svelte
index cdc4d27a..ea31ed2c 100644
--- a/src/docs/previews/range-calendar/minMax/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/minMax/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		fixedWeeks: true,
@@ -32,7 +32,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/range-calendar/multipleMonths/tailwind/index.svelte b/src/docs/previews/range-calendar/multipleMonths/tailwind/index.svelte
index c9abe028..48db315a 100644
--- a/src/docs/previews/range-calendar/multipleMonths/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/multipleMonths/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		fixedWeeks: true,
@@ -29,7 +29,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/range-calendar/pagedNav/tailwind/index.svelte b/src/docs/previews/range-calendar/pagedNav/tailwind/index.svelte
index 3ab04582..7b2741be 100644
--- a/src/docs/previews/range-calendar/pagedNav/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/pagedNav/tailwind/index.svelte
@@ -4,7 +4,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		fixedWeeks: true,
@@ -30,7 +30,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/docs/previews/range-calendar/unavailable/tailwind/index.svelte b/src/docs/previews/range-calendar/unavailable/tailwind/index.svelte
index 17e3c870..b5ff69b5 100644
--- a/src/docs/previews/range-calendar/unavailable/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/unavailable/tailwind/index.svelte
@@ -5,7 +5,7 @@
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { months, headingValue, daysOfWeek },
+		states: { months, headingValue, weekdays },
 		helpers: { isDateDisabled, isDateUnavailable },
 	} = createRangeCalendar({
 		fixedWeeks: true,
@@ -32,7 +32,7 @@
 			<table use:melt={$grid}>
 				<thead aria-hidden="true">
 					<tr>
-						{#each $daysOfWeek as day}
+						{#each $weekdays as day}
 							<th>
 								<div>
 									{day}
diff --git a/src/lib/builders/calendar/create.ts b/src/lib/builders/calendar/create.ts
index a82f179b..2ef18b14 100644
--- a/src/lib/builders/calendar/create.ts
+++ b/src/lib/builders/calendar/create.ts
@@ -56,6 +56,7 @@ const defaults = {
 	maxValue: undefined,
 	disabled: false,
 	readonly: false,
+	weekdayFormat: 'narrow',
 } satisfies CreateCalendarProps;
 
 type CalendarParts = 'content' | 'nextButton' | 'prevButton' | 'grid' | 'cell' | 'heading';
@@ -91,6 +92,7 @@ export function createCalendar<
 		isDateUnavailable,
 		disabled,
 		readonly,
+		weekdayFormat,
 	} = options;
 
 	const ids = toWritableStores({ ...generateIds(calendarIdParts), ...withDefaults.ids });
@@ -574,7 +576,7 @@ export function createCalendar<
 	 * <table use:melt={$grid} class="w-full">
 	 * 	<thead aria-hidden="true">
 	 * 		<tr>
-	 * 			{#each $daysOfWeek as day}
+	 * 			{#each $weekdays as day}
 	 * 				<th class="text-sm font-semibold text-magnum-800">
 	 * 					<div class="flex h-6 w-6 items-center justify-center p-4">
 	 * 						{day}
@@ -613,10 +615,10 @@ export function createCalendar<
 	 * ```
 	 *
 	 */
-	const daysOfWeek = derived([months, locale], ([$months, _]) => {
+	const weekdays = derived([months, weekdayFormat, locale], ([$months, $weekdayFormat, _]) => {
 		if (!$months.length) return [];
 		return $months[0].weeks[0].map((date) => {
-			return formatter.dayOfWeek(toDate(date));
+			return formatter.dayOfWeek(toDate(date), $weekdayFormat);
 		});
 	});
 
@@ -1101,7 +1103,7 @@ import { generateIds } from '../../internal/helpers/id'
 			placeholder: placeholder.toWritable(),
 			months,
 			value,
-			daysOfWeek,
+			weekdays,
 			headingValue,
 		},
 		helpers: {
diff --git a/src/lib/builders/calendar/types.ts b/src/lib/builders/calendar/types.ts
index 283a1e05..994f1bb7 100644
--- a/src/lib/builders/calendar/types.ts
+++ b/src/lib/builders/calendar/types.ts
@@ -139,10 +139,26 @@ export type CreateCalendarProps<
 	 * be a number between 0 and 6, where 0 is Sunday and 6 is
 	 * Saturday.
 	 *
-	 * @default 0 (Sunday)
+	 * @defaultValue 0 (Sunday)
 	 */
 	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
+	/**
+	 * How the string representation of the weekdays provided via the `weekdays` state store
+	 * should be formatted.
+	 *
+	 * ```md
+	 * - "long": "Sunday", "Monday", "Tuesday", etc.
+	 * - "short": "Sun", "Mon", "Tue", etc.
+	 * - "narrow": "S", "M", "T", etc.
+	 *```
+	 *
+	 * @default "narrow"
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday
+	 */
+	weekdayFormat?: Intl.DateTimeFormatOptions['weekday'];
+
 	/**
 	 * A function that receives a date and returns `true` or `false` to indicate whether
 	 * the date is disabled.
diff --git a/src/lib/builders/range-calendar/create.ts b/src/lib/builders/range-calendar/create.ts
index a4071d08..d8945dcb 100644
--- a/src/lib/builders/range-calendar/create.ts
+++ b/src/lib/builders/range-calendar/create.ts
@@ -64,6 +64,7 @@ const defaults = {
 	maxValue: undefined,
 	disabled: false,
 	readonly: false,
+	weekdayFormat: 'narrow',
 } satisfies CreateRangeCalendarProps;
 
 /**
@@ -97,6 +98,7 @@ export function createRangeCalendar<T extends DateValue = DateValue>(
 		maxValue,
 		disabled,
 		readonly,
+		weekdayFormat,
 	} = options;
 
 	const ids = toWritableStores({ ...generateIds(rangeCalendarIdParts), ...withDefaults.ids });
@@ -588,10 +590,10 @@ export function createRangeCalendar<T extends DateValue = DateValue>(
 	 * you can do so by accessing the first week of the first month,
 	 * and mapping over the dates to get/format each day of the week.
 	 */
-	const daysOfWeek = derived([months, locale], ([$months, _]) => {
+	const weekdays = derived([months, weekdayFormat, locale], ([$months, $weekdayFormat, _]) => {
 		if (!$months.length) return [];
 		return $months[0].weeks[0].map((date) => {
-			return formatter.dayOfWeek(toDate(date));
+			return formatter.dayOfWeek(toDate(date), $weekdayFormat);
 		});
 	});
 
@@ -1031,7 +1033,7 @@ import { generateIds } from '../../internal/helpers/id'
 		states: {
 			placeholder: placeholder.toWritable(),
 			months,
-			daysOfWeek,
+			weekdays,
 			headingValue,
 			value,
 		},
diff --git a/src/lib/builders/range-calendar/types.ts b/src/lib/builders/range-calendar/types.ts
index 095c010c..3906316a 100644
--- a/src/lib/builders/range-calendar/types.ts
+++ b/src/lib/builders/range-calendar/types.ts
@@ -141,6 +141,21 @@ export type RangeCalendarProps = {
 	 */
 	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
+	/**
+	 * How the string representation of the weekdays provided via the `weekdays` state
+	 * store should be formatted.
+	 *
+	 * ```md
+	 * - "long": "Sunday", "Monday", "Tuesday", etc.
+	 * - "short": "Sun", "Mon", "Tue", etc.
+	 * - "narrow": "S", "M", "T", etc.
+	 *```
+	 * @default "narrow"
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday
+	 */
+	weekdayFormat?: Intl.DateTimeFormatOptions['weekday'];
+
 	/**
 	 * Any dates that match the provided matchers will
 	 * be marked as disabled, which means they cannot be


Test patch:
diff --git a/src/tests/calendar/Calendar.spec.ts b/src/tests/calendar/Calendar.spec.ts
index fa8f9b52..e290abd8 100644
--- a/src/tests/calendar/Calendar.spec.ts
+++ b/src/tests/calendar/Calendar.spec.ts
@@ -18,6 +18,10 @@ const controlledCalendarDate = writable<DateValue | undefined>(calendarDate);
 const controlledCalendarDateTime = writable<DateValue | undefined>(calendarDateTime);
 const controlledZonedDateTime = writable<DateValue | undefined>(zonedDateTime);
 
+const narrowWeekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+const shortWeekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const longWeekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
 function setup(props: CreateCalendarProps = {}) {
 	const user = userEvent.setup();
 	const returned = render(CalendarTest, props);
@@ -619,4 +623,59 @@ describe('Calendar', () => {
 		expect(firstDayOfMonth).toHaveFocus();
 		expect(firstDayOfMonth).not.toHaveAttribute('data-selected');
 	});
+
+	test('weekdayFormat prop - `"narrow"` (default)', async () => {
+		const { getByTestId } = setup();
+
+		for (const [i, weekday] of narrowWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+	});
+
+	test('weekdayFormat prop - `"short"`', async () => {
+		const { getByTestId } = setup({
+			weekdayFormat: 'short',
+		});
+
+		for (const [i, weekday] of shortWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+	});
+
+	test('weekdayFormat prop - `"long"`', async () => {
+		const { getByTestId } = setup({
+			weekdayFormat: 'long',
+		});
+
+		for (const [i, weekday] of longWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+	});
+
+	test('dynamically change weekdayFormat option', async () => {
+		const { getByTestId, user } = setup();
+
+		for (const [i, weekday] of narrowWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+
+		const cycleButton = getByTestId('cycle-weekday-format');
+		await user.click(cycleButton);
+
+		for (const [i, weekday] of shortWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+
+		await user.click(cycleButton);
+
+		for (const [i, weekday] of longWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+	});
 });
diff --git a/src/tests/calendar/CalendarMultiTest.svelte b/src/tests/calendar/CalendarMultiTest.svelte
index c84c9175..04ebdb6c 100644
--- a/src/tests/calendar/CalendarMultiTest.svelte
+++ b/src/tests/calendar/CalendarMultiTest.svelte
@@ -2,6 +2,7 @@
 	import { createCalendar, type CreateCalendarProps } from '$lib/builders';
 	import { ChevronRight, ChevronLeft } from 'lucide-svelte';
 	import { melt } from '$lib';
+	import { removeUndefined } from '../utils';
 
 	type CalendarProps = CreateCalendarProps<true>;
 
@@ -22,30 +23,34 @@
 	export let fixedWeeks: CalendarProps['fixedWeeks'] = undefined;
 	export let minValue: CalendarProps['minValue'] = undefined;
 	export let maxValue: CalendarProps['maxValue'] = undefined;
+	export let weekdayFormat: CalendarProps['weekdayFormat'] = undefined;
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { value: insideValue, months, headingValue, daysOfWeek },
-	} = createCalendar<true>({
-		value,
-		defaultValue,
-		defaultPlaceholder,
-		onValueChange,
-		onPlaceholderChange,
-		isDateUnavailable,
-		isDateDisabled,
-		locale,
-		calendarLabel,
-		preventDeselect,
-		numberOfMonths,
-		pagedNavigation,
-		placeholder,
-		weekStartsOn,
-		fixedWeeks,
-		minValue,
-		maxValue,
-		multiple: true,
-	});
+		states: { value: insideValue, months, headingValue, weekdays },
+	} = createCalendar(
+		removeUndefined({
+			value,
+			defaultValue,
+			defaultPlaceholder,
+			onValueChange,
+			onPlaceholderChange,
+			isDateUnavailable,
+			isDateDisabled,
+			locale,
+			calendarLabel,
+			preventDeselect,
+			numberOfMonths,
+			pagedNavigation,
+			placeholder,
+			weekStartsOn,
+			fixedWeeks,
+			minValue,
+			maxValue,
+			multiple: true,
+			weekdayFormat,
+		})
+	);
 </script>
 
 <main class="flex h-full">
@@ -72,7 +77,7 @@
 					<table use:melt={$grid} class="w-full" data-testid="grid-{i}">
 						<thead aria-hidden="true">
 							<tr>
-								{#each $daysOfWeek as day, idx}
+								{#each $weekdays as day, idx}
 									<th class="text-sm font-semibold text-magnum-800">
 										<div
 											class="flex h-6 w-6 items-center justify-center p-4"
diff --git a/src/tests/calendar/CalendarTest.svelte b/src/tests/calendar/CalendarTest.svelte
index 7fd9f97c..2592cd5b 100644
--- a/src/tests/calendar/CalendarTest.svelte
+++ b/src/tests/calendar/CalendarTest.svelte
@@ -24,10 +24,12 @@
 	export let multiple: boolean | undefined = undefined;
 	export let disabled: CreateCalendarProps['disabled'] = undefined;
 	export let readonly: CreateCalendarProps['readonly'] = undefined;
+	export let weekdayFormat: CreateCalendarProps['weekdayFormat'] = undefined;
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { value: insideValue, months, headingValue, daysOfWeek },
+		states: { value: insideValue, months, headingValue, weekdays },
+		options: { weekdayFormat: weekdayFormatOption },
 	} = createCalendar(
 		removeUndefined({
 			value,
@@ -50,8 +52,22 @@
 			multiple,
 			disabled,
 			readonly,
+			weekdayFormat,
 		})
 	);
+
+	function cycleWeekdayFormat() {
+		weekdayFormatOption.update((prev) => {
+			switch (prev) {
+				case 'narrow':
+					return 'short';
+				case 'short':
+					return 'long';
+				case 'long':
+					return 'short';
+			}
+		});
+	}
 </script>
 
 <main class="flex h-full">
@@ -78,11 +94,11 @@
 						<table use:melt={$grid} class="w-full" data-testid="grid-{i}">
 							<thead aria-hidden="true">
 								<tr>
-									{#each $daysOfWeek as day, idx}
+									{#each $weekdays as day, idx}
 										<th class="text-sm font-semibold text-magnum-800">
 											<div
 												class="flex h-6 w-6 items-center justify-center p-4"
-												data-testid="day-of-week-{idx}"
+												data-testid="weekday-{idx}"
 											>
 												{day}
 											</div>
@@ -113,6 +129,9 @@
 			</div>
 		</div>
 	</div>
+	<button on:click={cycleWeekdayFormat} data-testid="cycle-weekday-format">
+		Cycle weekdayFormat
+	</button>
 </main>
 
 <style lang="postcss">
diff --git a/src/tests/date-picker/DatePicker.spec.ts b/src/tests/date-picker/DatePicker.spec.ts
index 29530050..cb7ac8be 100644
--- a/src/tests/date-picker/DatePicker.spec.ts
+++ b/src/tests/date-picker/DatePicker.spec.ts
@@ -14,6 +14,10 @@ const calendarDate = new CalendarDate(1980, 1, 20);
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
 const zonedDateTime = toZoned(calendarDateTime, 'America/New_York');
 
+const narrowWeekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+const shortWeekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const longWeekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
 function setup(props: CreateDatePickerProps = {}) {
 	const user = userEvent.setup();
 	const returned = render(DatePickerTest, props);
@@ -179,7 +183,7 @@ describe('DatePicker', () => {
 			await user.click(trigger);
 			const calendar = getByTestId('calendar');
 			expect(calendar).toBeVisible();
-			const secondDayInMonth = getByTestId('month-0-date-2');
+			const secondDayInMonth = getByTestId('month-1-date-2');
 			await user.click(secondDayInMonth);
 			expect(secondDayInMonth).toHaveAttribute('data-selected');
 
@@ -197,7 +201,7 @@ describe('DatePicker', () => {
 			const calendar = getByTestId('calendar');
 			expect(calendar).toBeVisible();
 
-			const secondDayInMonth = getByTestId('month-0-date-2');
+			const secondDayInMonth = getByTestId('month-1-date-2');
 			secondDayInMonth.focus();
 			expect(secondDayInMonth).toHaveFocus();
 			await user.keyboard(kbd.SPACE);
@@ -208,7 +212,7 @@ describe('DatePicker', () => {
 			await user.keyboard(kbd.ARROW_RIGHT);
 			await user.keyboard(kbd.ENTER);
 
-			const thirdDayInMonth = getByTestId('month-0-date-3');
+			const thirdDayInMonth = getByTestId('month-1-date-3');
 			expect(thirdDayInMonth).toHaveAttribute('data-selected');
 			const newDate2 = zonedDateTime.set({ day: 3 });
 			const insideValue2 = getByTestId('inside-value');
@@ -373,7 +377,7 @@ describe('DatePicker', () => {
 			const minuteSegment = getByTestId('minute');
 			expect(minuteSegment).not.toHaveTextContent(String(undefined));
 
-			const firstDayInMonth = getByTestId('month-0-date-1');
+			const firstDayInMonth = getByTestId('month-1-date-1');
 			await user.click(firstDayInMonth);
 
 			await tick();
@@ -393,6 +397,61 @@ describe('DatePicker', () => {
 				expect(getByTestId(segment)).not.toBeNull();
 			}
 		});
+
+		test('weekdayFormat prop - `"narrow"` (default)', async () => {
+			const { getByTestId } = setup();
+
+			for (const [i, weekday] of narrowWeekdays.entries()) {
+				const weekdayElement = getByTestId(`weekday-${i}`);
+				expect(weekdayElement).toHaveTextContent(weekday);
+			}
+		});
+
+		test('weekdayFormat prop - `"short"`', async () => {
+			const { getByTestId } = setup({
+				weekdayFormat: 'short',
+			});
+
+			for (const [i, weekday] of shortWeekdays.entries()) {
+				const weekdayElement = getByTestId(`weekday-${i}`);
+				expect(weekdayElement).toHaveTextContent(weekday);
+			}
+		});
+
+		test('weekdayFormat prop - `"long"`', async () => {
+			const { getByTestId } = setup({
+				weekdayFormat: 'long',
+			});
+
+			for (const [i, weekday] of longWeekdays.entries()) {
+				const weekdayElement = getByTestId(`weekday-${i}`);
+				expect(weekdayElement).toHaveTextContent(weekday);
+			}
+		});
+
+		test('dynamically change weekdayFormat option', async () => {
+			const { getByTestId, user } = setup();
+
+			for (const [i, weekday] of narrowWeekdays.entries()) {
+				const weekdayElement = getByTestId(`weekday-${i}`);
+				expect(weekdayElement).toHaveTextContent(weekday);
+			}
+
+			const cycleButton = getByTestId('cycle-weekday-format');
+			await user.click(cycleButton);
+
+			for (const [i, weekday] of shortWeekdays.entries()) {
+				const weekdayElement = getByTestId(`weekday-${i}`);
+				expect(weekdayElement).toHaveTextContent(weekday);
+			}
+
+			await user.click(cycleButton);
+
+			for (const [i, weekday] of longWeekdays.entries()) {
+				const weekdayElement = getByTestId(`weekday-${i}`);
+				expect(weekdayElement).toHaveTextContent(weekday);
+			}
+		});
 	});
 
 	test('clicking the label focuses the first segment', async () => {
diff --git a/src/tests/date-picker/DatePickerTest.svelte b/src/tests/date-picker/DatePickerTest.svelte
index ee14ade2..88cbffab 100644
--- a/src/tests/date-picker/DatePickerTest.svelte
+++ b/src/tests/date-picker/DatePickerTest.svelte
@@ -3,6 +3,7 @@
 	import { ChevronRight, ChevronLeft, Calendar } from 'lucide-svelte';
 	import { melt } from '$lib';
 	import { fade } from 'svelte/transition';
+	import { removeUndefined } from '../utils';
 
 	export let value: CreateDatePickerProps['value'] = undefined;
 	export let defaultValue: CreateDatePickerProps['defaultValue'] = undefined;
@@ -25,6 +26,7 @@
 	export let pagedNavigation: CreateDatePickerProps['pagedNavigation'] = undefined;
 	export let placeholder: CreateDatePickerProps['placeholder'] = undefined;
 	export let weekStartsOn: CreateDatePickerProps['weekStartsOn'] = undefined;
+	export let weekdayFormat: CreateDatePickerProps['weekdayFormat'] = undefined;
 
 	const {
 		elements: {
@@ -40,31 +42,47 @@
 			content,
 			label,
 		},
-		states: { value: insideValue, months, headingValue, daysOfWeek, segmentContents },
-		options: { locale: insideLocale },
-	} = createDatePicker({
-		value,
-		defaultValue,
-		defaultPlaceholder,
-		onValueChange,
-		onPlaceholderChange,
-		isDateUnavailable,
-		disabled,
-		readonly,
-		hourCycle,
-		locale,
-		hideTimeZone,
-		granularity,
-		dateFieldIds,
-		calendarIds,
-		preventDeselect,
-		calendarLabel,
-		numberOfMonths,
-		pagedNavigation,
-		placeholder,
-		weekStartsOn,
-		isDateDisabled,
-	});
+		states: { value: insideValue, months, headingValue, weekdays, segmentContents },
+		options: { locale: insideLocale, weekdayFormat: weekdayFormatOption },
+	} = createDatePicker(
+		removeUndefined({
+			value,
+			defaultValue,
+			defaultPlaceholder,
+			onValueChange,
+			onPlaceholderChange,
+			isDateUnavailable,
+			disabled,
+			readonly,
+			hourCycle,
+			locale,
+			hideTimeZone,
+			granularity,
+			dateFieldIds,
+			calendarIds,
+			preventDeselect,
+			calendarLabel,
+			numberOfMonths,
+			pagedNavigation,
+			placeholder,
+			weekStartsOn,
+			isDateDisabled,
+			weekdayFormat,
+		})
+	);
+
+	function cycleWeekdayFormat() {
+		weekdayFormatOption.update((prev) => {
+			switch (prev) {
+				case 'narrow':
+					return 'short';
+				case 'short':
+					return 'long';
+				case 'long':
+					return 'short';
+			}
+		});
+	}
 </script>
 
 <main class="flex w-full flex-col items-center gap-3">
@@ -116,11 +134,11 @@
 				<table use:melt={$grid} class="w-full" data-testid="grid-{i}">
 					<thead aria-hidden="true">
 						<tr>
-							{#each $daysOfWeek as day, idx}
+							{#each $weekdays as day, idx}
 								<th class="text-sm font-semibold text-magnum-800">
 									<div
 										class="flex h-6 w-6 items-center justify-center p-4"
-										data-testid="day-of-week-{idx}"
+										data-testid="weekday-{idx}"
 									>
 										{day}
 									</div>
@@ -136,7 +154,7 @@
 										<div
 											use:melt={$cell(date, month.value)}
 											class="cell"
-											data-testid="month-{i}-date-{date.day}"
+											data-testid="month-{date.month}-date-{date.day}"
 										>
 											{date.day}
 										</div>
@@ -148,6 +166,9 @@
 				</table>
 			{/each}
 		</div>
+		<button on:click={cycleWeekdayFormat} data-testid="cycle-weekday-format">
+			Cycle weekdayFormat
+		</button>
 	</div>
 </main>
 
diff --git a/src/tests/range-calendar/RangeCalendar.spec.ts b/src/tests/range-calendar/RangeCalendar.spec.ts
index 31032b83..5d24da04 100644
--- a/src/tests/range-calendar/RangeCalendar.spec.ts
+++ b/src/tests/range-calendar/RangeCalendar.spec.ts
@@ -28,6 +28,10 @@ const controlledCalendarDateRange = writable<DateRange>(calendarDateRange);
 const controlledCalendarDateTimeRange = writable<DateRange>(calendarDateTimeRange);
 const controlledZonedDateTimeRange = writable<DateRange>(zonedDateTimeRange);
 
+const narrowWeekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+const shortWeekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const longWeekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
 function setup(props: CreateRangeCalendarProps = {}) {
 	const user = userEvent.setup();
 	const returned = render(RangeCalendarTest, props);
@@ -369,7 +373,7 @@ describe('Range Calendar', () => {
 		expect(heading).toHaveTextContent('April 1980');
 	});
 
-	test.todo('overridable store functions as expected', async () => {
+	test('overridable store functions as expected', async () => {
 		const overrideDay = {
 			start: new CalendarDate(1980, 2, 25),
 			end: new CalendarDate(1980, 2, 27),
@@ -392,8 +396,8 @@ describe('Range Calendar', () => {
 		await user.click(fourthDayInMonth);
 		await tick();
 
-		const selectedDaysAfterClick = calendar.querySelectorAll('[data-selected]');
-		expect(selectedDaysAfterClick).toHaveLength(3);
+		const selectedDaysAfterClick = getByTestId('calendar').querySelectorAll('[data-selected]');
+		expect(selectedDaysAfterClick).toHaveLength(2);
 	});
 
 	test('unavailable dates behavior', async () => {
@@ -443,4 +447,59 @@ describe('Range Calendar', () => {
 
 		expect(calendar.querySelectorAll('[data-selected]')).toHaveLength(1);
 	});
+
+	test('weekdayFormat prop - `"narrow"` (default)', async () => {
+		const { getByTestId } = setup();
+
+		for (const [i, weekday] of narrowWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+	});
+
+	test('weekdayFormat prop - `"short"`', async () => {
+		const { getByTestId } = setup({
+			weekdayFormat: 'short',
+		});
+
+		for (const [i, weekday] of shortWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+	});
+
+	test('weekdayFormat prop - `"long"`', async () => {
+		const { getByTestId } = setup({
+			weekdayFormat: 'long',
+		});
+
+		for (const [i, weekday] of longWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+	});
+
+	test('dynamically change weekdayFormat option', async () => {
+		const { getByTestId, user } = setup();
+
+		for (const [i, weekday] of narrowWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+
+		const cycleButton = getByTestId('cycle-weekday-format');
+		await user.click(cycleButton);
+
+		for (const [i, weekday] of shortWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+
+		await user.click(cycleButton);
+
+		for (const [i, weekday] of longWeekdays.entries()) {
+			const weekdayElement = getByTestId(`weekday-${i}`);
+			expect(weekdayElement).toHaveTextContent(weekday);
+		}
+	});
 });
diff --git a/src/tests/range-calendar/RangeCalendarTest.svelte b/src/tests/range-calendar/RangeCalendarTest.svelte
index bdc3b38b..17db9c4e 100644
--- a/src/tests/range-calendar/RangeCalendarTest.svelte
+++ b/src/tests/range-calendar/RangeCalendarTest.svelte
@@ -2,6 +2,7 @@
 	import { createRangeCalendar, type CreateRangeCalendarProps } from '$lib/builders';
 	import { ChevronRight, ChevronLeft } from 'lucide-svelte';
 	import { melt } from '$lib';
+	import { removeUndefined } from '../utils';
 
 	export let value: CreateRangeCalendarProps['value'] = undefined;
 	export let defaultValue: CreateRangeCalendarProps['defaultValue'] = undefined;
@@ -20,29 +21,47 @@
 	export let fixedWeeks: CreateRangeCalendarProps['fixedWeeks'] = undefined;
 	export let minValue: CreateRangeCalendarProps['minValue'] = undefined;
 	export let maxValue: CreateRangeCalendarProps['maxValue'] = undefined;
+	export let weekdayFormat: CreateRangeCalendarProps['weekdayFormat'] = undefined;
 
 	const {
 		elements: { calendar, heading, grid, cell, prevButton, nextButton },
-		states: { value: insideValue, months, headingValue, daysOfWeek },
-	} = createRangeCalendar({
-		value,
-		defaultValue,
-		defaultPlaceholder,
-		onValueChange,
-		onPlaceholderChange,
-		isDateUnavailable,
-		isDateDisabled,
-		locale,
-		calendarLabel,
-		preventDeselect,
-		numberOfMonths,
-		pagedNavigation,
-		placeholder,
-		weekStartsOn,
-		fixedWeeks,
-		minValue,
-		maxValue,
-	});
+		states: { value: insideValue, months, headingValue, weekdays },
+		options: { weekdayFormat: weekdayFormatOption },
+	} = createRangeCalendar(
+		removeUndefined({
+			value,
+			defaultValue,
+			defaultPlaceholder,
+			onValueChange,
+			onPlaceholderChange,
+			isDateUnavailable,
+			isDateDisabled,
+			locale,
+			calendarLabel,
+			preventDeselect,
+			numberOfMonths,
+			pagedNavigation,
+			placeholder,
+			weekStartsOn,
+			fixedWeeks,
+			minValue,
+			maxValue,
+			weekdayFormat,
+		})
+	);
+
+	function cycleWeekdayFormat() {
+		weekdayFormatOption.update((prev) => {
+			switch (prev) {
+				case 'narrow':
+					return 'short';
+				case 'short':
+					return 'long';
+				case 'long':
+					return 'short';
+			}
+		});
+	}
 </script>
 
 <main class="flex h-full">
@@ -71,11 +90,11 @@
 					<table use:melt={$grid} class="w-full" data-testid="grid-{i}">
 						<thead aria-hidden="true">
 							<tr>
-								{#each $daysOfWeek as day, idx}
+								{#each $weekdays as day, idx}
 									<th class="text-sm font-semibold text-magnum-800">
 										<div
 											class="flex h-6 w-6 items-center justify-center p-4"
-											data-testid="day-of-week-{idx}"
+											data-testid="weekday-{idx}"
 										>
 											{day}
 										</div>
@@ -105,6 +124,9 @@
 			</div>
 		</div>
 	</div>
+	<button on:click={cycleWeekdayFormat} data-testid="cycle-weekday-format">
+		Cycle weekdayFormat
+	</button>
 </main>
 
 <style lang="postcss">