From 9971e0a2a8eb54085299b74be60d205b7ed9f8b2 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 17 Feb 2025 23:35:34 +0800 Subject: [PATCH 01/10] feat(calendar): add firstDayOfWeek --- packages/components/calendar/src/calendar-base.tsx | 3 +++ packages/components/calendar/src/calendar-cell.tsx | 7 +++++-- packages/components/calendar/src/calendar-month.tsx | 7 +++++-- packages/components/calendar/src/use-calendar-base.ts | 6 ++++++ packages/components/calendar/src/use-calendar.ts | 2 ++ packages/components/calendar/stories/calendar.stories.tsx | 8 ++++++++ 6 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx index 9fcef4cdd7..278e50b8d1 100644 --- a/packages/components/calendar/src/calendar-base.tsx +++ b/packages/components/calendar/src/calendar-base.tsx @@ -33,6 +33,7 @@ export interface CalendarBaseProps extends HTMLHeroUIProps<"div"> { errorMessageProps: HTMLAttributes; calendarRef: RefObject; errorMessage?: ReactNode; + firstDayOfWeek?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"; } /** @@ -63,6 +64,7 @@ export function CalendarBase(props: CalendarBaseProps) { errorMessageProps, calendarRef: ref, errorMessage, + firstDayOfWeek, ...otherProps } = props; @@ -120,6 +122,7 @@ export function CalendarBase(props: CalendarBaseProps) { key={`calendar-month-${i}`} currentMonth={currentMonth.month} direction={direction} + firstDayOfWeek={firstDayOfWeek} startDate={d} /> ); diff --git a/packages/components/calendar/src/calendar-cell.tsx b/packages/components/calendar/src/calendar-cell.tsx index efab5a00f7..73fd88eefb 100644 --- a/packages/components/calendar/src/calendar-cell.tsx +++ b/packages/components/calendar/src/calendar-cell.tsx @@ -17,10 +17,12 @@ export interface CalendarCellProps extends HTMLHeroUIProps<"td">, AriaCalendarCe slots?: CalendarReturnType; classNames?: SlotsToClasses; currentMonth: CalendarDate; + firstDayOfWeek?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"; } export function CalendarCell(originalProps: CalendarCellProps) { - const {state, slots, isPickerVisible, currentMonth, classNames, ...props} = originalProps; + const {state, slots, isPickerVisible, currentMonth, classNames, firstDayOfWeek, ...props} = + originalProps; const ref = useRef(null); @@ -53,7 +55,8 @@ export function CalendarCell(originalProps: CalendarCellProps) { const isSelectionEnd = isSelected && highlightedRange ? isSameDay(props.date, highlightedRange.end) : false; const {locale} = useLocale(); - const dayOfWeek = getDayOfWeek(props.date, locale); + + const dayOfWeek = getDayOfWeek(props.date, locale, firstDayOfWeek); const isRangeStart = isSelected && (isFirstSelectedAfterDisabled || dayOfWeek === 0 || props.date.day === 1); const isRangeEnd = diff --git a/packages/components/calendar/src/calendar-month.tsx b/packages/components/calendar/src/calendar-month.tsx index f5767d6ee4..c5182135e8 100644 --- a/packages/components/calendar/src/calendar-month.tsx +++ b/packages/components/calendar/src/calendar-month.tsx @@ -17,10 +17,11 @@ export interface CalendarMonthProps extends HTMLHeroUIProps<"table">, CalendarPr } export function CalendarMonth(props: CalendarMonthProps) { - const {startDate, direction, currentMonth} = props; + const {startDate, direction, currentMonth, firstDayOfWeek} = props; const {locale} = useLocale(); - const weeksInMonth = getWeeksInMonth(startDate, locale); + + const weeksInMonth = getWeeksInMonth(startDate, locale, firstDayOfWeek); const {state, slots, weekdayStyle, isHeaderExpanded, disableAnimation, classNames} = useCalendarContext(); @@ -30,6 +31,7 @@ export function CalendarMonth(props: CalendarMonthProps) { ...props, weekdayStyle, endDate: endOfMonth(startDate), + firstDayOfWeek, }, state, ); @@ -52,6 +54,7 @@ export function CalendarMonth(props: CalendarMonthProps) { classNames={classNames} currentMonth={startDate} date={date} + firstDayOfWeek={firstDayOfWeek} isPickerVisible={isHeaderExpanded} slots={slots} state={state} diff --git a/packages/components/calendar/src/use-calendar-base.ts b/packages/components/calendar/src/use-calendar-base.ts index 9a669a490b..ede48f5014 100644 --- a/packages/components/calendar/src/use-calendar-base.ts +++ b/packages/components/calendar/src/use-calendar-base.ts @@ -65,6 +65,10 @@ interface Props extends HeroUIBaseProps { * @default true */ showHelper?: boolean; + /** + * The day that starts the week. + */ + firstDayOfWeek?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"; /** * Whether the calendar header is expanded. This is only available if the `showMonthAndYearPickers` prop is set to `true`. * @default false @@ -207,6 +211,7 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) { topContent, bottomContent, showHelper = true, + firstDayOfWeek, calendarWidth = 256, visibleMonths: visibleMonthsProp = 1, weekdayStyle = "narrow", @@ -326,6 +331,7 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) { maxValue, baseProps, showHelper, + firstDayOfWeek, weekdayStyle, visibleMonths, visibleDuration, diff --git a/packages/components/calendar/src/use-calendar.ts b/packages/components/calendar/src/use-calendar.ts index 58fcded848..576a51dbb0 100644 --- a/packages/components/calendar/src/use-calendar.ts +++ b/packages/components/calendar/src/use-calendar.ts @@ -29,6 +29,7 @@ export function useCalendar({ minValue, maxValue, showHelper, + firstDayOfWeek, weekdayStyle, visibleDuration, baseProps, @@ -78,6 +79,7 @@ export function useCalendar({ ...baseProps, Component, showHelper, + firstDayOfWeek, topContent, bottomContent, buttonPickerProps, diff --git a/packages/components/calendar/stories/calendar.stories.tsx b/packages/components/calendar/stories/calendar.stories.tsx index 098b3a4f85..cfd037ef25 100644 --- a/packages/components/calendar/stories/calendar.stories.tsx +++ b/packages/components/calendar/stories/calendar.stories.tsx @@ -412,3 +412,11 @@ export const ReducedMotion = { ...defaultProps, }, }; + +export const FirstDayOfWeek = { + render: Template, + args: { + ...defaultProps, + firstDayOfWeek: "mon", + }, +}; From bfb1f2a2c945755fd6b334adb6d92fd296a6eaef Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 17 Feb 2025 23:40:09 +0800 Subject: [PATCH 02/10] feat(docs): add firstDayOfWeek in Calendar docs --- .../components/calendar/first-day-of-week.raw.jsx | 5 +++++ .../content/components/calendar/first-day-of-week.ts | 9 +++++++++ apps/docs/content/components/calendar/index.ts | 2 ++ apps/docs/content/docs/components/calendar.mdx | 6 ++++++ 4 files changed, 22 insertions(+) create mode 100644 apps/docs/content/components/calendar/first-day-of-week.raw.jsx create mode 100644 apps/docs/content/components/calendar/first-day-of-week.ts diff --git a/apps/docs/content/components/calendar/first-day-of-week.raw.jsx b/apps/docs/content/components/calendar/first-day-of-week.raw.jsx new file mode 100644 index 0000000000..29979e660a --- /dev/null +++ b/apps/docs/content/components/calendar/first-day-of-week.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@heroui/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/first-day-of-week.ts b/apps/docs/content/components/calendar/first-day-of-week.ts new file mode 100644 index 0000000000..29f4984121 --- /dev/null +++ b/apps/docs/content/components/calendar/first-day-of-week.ts @@ -0,0 +1,9 @@ +import App from "./first-day-of-week.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/calendar/index.ts b/apps/docs/content/components/calendar/index.ts index b0f687a6f5..9cdc5eb042 100644 --- a/apps/docs/content/components/calendar/index.ts +++ b/apps/docs/content/components/calendar/index.ts @@ -10,6 +10,7 @@ import invalidDate from "./invalid-date"; import withMonthAndYearPicker from "./with-month-and-year-picker"; import internationalCalendars from "./international-calendars"; import visibleMonths from "./visible-months"; +import firstDayOfWeek from "./first-day-of-week"; import pageBehaviour from "./page-behaviour"; import presets from "./presets"; @@ -26,6 +27,7 @@ export const calendarContent = { withMonthAndYearPicker, internationalCalendars, visibleMonths, + firstDayOfWeek, pageBehaviour, presets, }; diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx index f1f0058c6e..f6702a05c8 100644 --- a/apps/docs/content/docs/components/calendar.mdx +++ b/apps/docs/content/docs/components/calendar.mdx @@ -117,6 +117,12 @@ By default, the Calendar displays a single month. The `visibleMonths` prop allow +### Custom first day of week + +By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. + + + ### Page Behaviour By default, when pressing the next or previous buttons, pagination will advance by the `visibleMonths` value. This behavior can be changed to page by single months instead, by setting `pageBehavior` to `single`. From 5fd7a688fdf9abad5ce30ad075cdba51a2c29d4c Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 17 Feb 2025 23:46:50 +0800 Subject: [PATCH 03/10] feat(calendar): add firstDayOfWeek to range calendar --- .../range-calendar/first-day-of-week.raw.jsx | 5 +++++ .../components/range-calendar/first-day-of-week.ts | 9 +++++++++ apps/docs/content/components/range-calendar/index.ts | 2 ++ apps/docs/content/docs/components/range-calendar.mdx | 12 ++++++++++++ .../components/calendar/src/use-range-calendar.ts | 2 ++ .../calendar/stories/range-calendar.stories.tsx | 8 ++++++++ 6 files changed, 38 insertions(+) create mode 100644 apps/docs/content/components/range-calendar/first-day-of-week.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/first-day-of-week.ts diff --git a/apps/docs/content/components/range-calendar/first-day-of-week.raw.jsx b/apps/docs/content/components/range-calendar/first-day-of-week.raw.jsx new file mode 100644 index 0000000000..7384284787 --- /dev/null +++ b/apps/docs/content/components/range-calendar/first-day-of-week.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@heroui/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/first-day-of-week.ts b/apps/docs/content/components/range-calendar/first-day-of-week.ts new file mode 100644 index 0000000000..29f4984121 --- /dev/null +++ b/apps/docs/content/components/range-calendar/first-day-of-week.ts @@ -0,0 +1,9 @@ +import App from "./first-day-of-week.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/range-calendar/index.ts b/apps/docs/content/components/range-calendar/index.ts index 37396dac6d..ad5268b5e1 100644 --- a/apps/docs/content/components/range-calendar/index.ts +++ b/apps/docs/content/components/range-calendar/index.ts @@ -10,6 +10,7 @@ import invalidDate from "./invalid-date"; import nonContiguousRanges from "./non-contiguous-ranges"; import internationalCalendars from "./international-calendars"; import visibleMonths from "./visible-months"; +import firstDayOfWeek from "./first-day-of-week"; import pageBehaviour from "./page-behaviour"; import presets from "./presets"; import withMonthAndYearPicker from "./with-month-and-year-picker"; @@ -27,6 +28,7 @@ export const rangeCalendarContent = { nonContiguousRanges, internationalCalendars, visibleMonths, + firstDayOfWeek, pageBehaviour, presets, withMonthAndYearPicker, diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx index 7c81f958fd..3821297647 100644 --- a/apps/docs/content/docs/components/range-calendar.mdx +++ b/apps/docs/content/docs/components/range-calendar.mdx @@ -125,6 +125,12 @@ By default, the Calendar displays a single month. The `visibleMonths` prop allow +### Custom first day of week + +By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. + + + ### Page Behaviour By default, when pressing the next or previous buttons, pagination will advance by the `visibleMonths` value. This behavior can be changed to page by single months instead, by setting `pageBehavior` to `single`. @@ -245,6 +251,12 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr description: "The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the showMonthAndYearPickers prop.", default: "1" }, + { + attribute: "firstDayOfWeek", + type: "sun | mon | tue | wed | thu | fri | sat", + description: "The day that starts the week.", + default: "-" + }, { attribute: "focusedValue", type: "DateValue", diff --git a/packages/components/calendar/src/use-range-calendar.ts b/packages/components/calendar/src/use-range-calendar.ts index 4f270b41ce..6fd648a719 100644 --- a/packages/components/calendar/src/use-range-calendar.ts +++ b/packages/components/calendar/src/use-range-calendar.ts @@ -35,6 +35,7 @@ export function useRangeCalendar({ domRef, locale, showHelper, + firstDayOfWeek, minValue, maxValue, weekdayStyle, @@ -86,6 +87,7 @@ export function useRangeCalendar({ ...baseProps, Component, showHelper, + firstDayOfWeek, topContent, bottomContent, buttonPickerProps, diff --git a/packages/components/calendar/stories/range-calendar.stories.tsx b/packages/components/calendar/stories/range-calendar.stories.tsx index 1007d6be13..10a0c875a7 100644 --- a/packages/components/calendar/stories/range-calendar.stories.tsx +++ b/packages/components/calendar/stories/range-calendar.stories.tsx @@ -414,3 +414,11 @@ export const Presets = { ...defaultProps, }, }; + +export const FirstDayOfWeek = { + render: Template, + args: { + ...defaultProps, + firstDayOfWeek: "mon", + }, +}; From 38d76cf2c5dd192c225661c80eb9d96abd429d6c Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 17 Feb 2025 23:47:09 +0800 Subject: [PATCH 04/10] feat(docs): add firstDayOfWeek to API table --- apps/docs/content/docs/components/calendar.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx index f6702a05c8..c6604286bb 100644 --- a/apps/docs/content/docs/components/calendar.mdx +++ b/apps/docs/content/docs/components/calendar.mdx @@ -243,6 +243,12 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr description: "The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the showMonthAndYearPickers prop.", default: "1" }, + { + attribute: "firstDayOfWeek", + type: "sun | mon | tue | wed | thu | fri | sat", + description: "The day that starts the week.", + default: "-" + }, { attribute: "focusedValue", type: "DateValue", From 32f5b8adc3d2b2af44b1db92f7c9aa8a2eca886e Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 17 Feb 2025 23:56:07 +0800 Subject: [PATCH 05/10] feat: add firstDayOfWeek to date picker & date range picker --- .../date-picker/first-day-of-week.raw.jsx | 14 ++++++++++++++ .../components/date-picker/first-day-of-week.ts | 9 +++++++++ apps/docs/content/components/date-picker/index.ts | 2 ++ .../date-range-picker/first-day-of-week.raw.jsx | 12 ++++++++++++ .../date-range-picker/first-day-of-week.ts | 9 +++++++++ .../date-picker/src/use-date-picker-base.ts | 2 ++ .../date-picker/stories/date-picker.stories.tsx | 8 ++++++++ .../stories/date-range-picker.stories.tsx | 8 ++++++++ 8 files changed, 64 insertions(+) create mode 100644 apps/docs/content/components/date-picker/first-day-of-week.raw.jsx create mode 100644 apps/docs/content/components/date-picker/first-day-of-week.ts create mode 100644 apps/docs/content/components/date-range-picker/first-day-of-week.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/first-day-of-week.ts diff --git a/apps/docs/content/components/date-picker/first-day-of-week.raw.jsx b/apps/docs/content/components/date-picker/first-day-of-week.raw.jsx new file mode 100644 index 0000000000..4d3ffa7857 --- /dev/null +++ b/apps/docs/content/components/date-picker/first-day-of-week.raw.jsx @@ -0,0 +1,14 @@ +import {DatePicker} from "@heroui/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/first-day-of-week.ts b/apps/docs/content/components/date-picker/first-day-of-week.ts new file mode 100644 index 0000000000..29f4984121 --- /dev/null +++ b/apps/docs/content/components/date-picker/first-day-of-week.ts @@ -0,0 +1,9 @@ +import App from "./first-day-of-week.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/date-picker/index.ts b/apps/docs/content/components/date-picker/index.ts index cc346caff1..3caafe690b 100644 --- a/apps/docs/content/components/date-picker/index.ts +++ b/apps/docs/content/components/date-picker/index.ts @@ -18,6 +18,7 @@ import minAndMaxDate from "./min-and-max-date"; import internationalCalendar from "./international-calendar"; import unavailableDates from "./unavailable-dates"; import visibleMonth from "./visible-month"; +import firstDayOfWeek from "./first-day-of-week"; import pageBehavior from "./page-behavior"; import preset from "./preset"; @@ -42,6 +43,7 @@ export const datePickerContent = { internationalCalendar, unavailableDates, visibleMonth, + firstDayOfWeek, pageBehavior, preset, }; diff --git a/apps/docs/content/components/date-range-picker/first-day-of-week.raw.jsx b/apps/docs/content/components/date-range-picker/first-day-of-week.raw.jsx new file mode 100644 index 0000000000..28357f11f9 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/first-day-of-week.raw.jsx @@ -0,0 +1,12 @@ +import {DateRangePicker} from "@heroui/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/first-day-of-week.ts b/apps/docs/content/components/date-range-picker/first-day-of-week.ts new file mode 100644 index 0000000000..29f4984121 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/first-day-of-week.ts @@ -0,0 +1,9 @@ +import App from "./first-day-of-week.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/packages/components/date-picker/src/use-date-picker-base.ts b/packages/components/date-picker/src/use-date-picker-base.ts index 3b7c27274e..f4e955717b 100644 --- a/packages/components/date-picker/src/use-date-picker-base.ts +++ b/packages/components/date-picker/src/use-date-picker-base.ts @@ -131,6 +131,7 @@ export function useDatePickerBase(originalProps: UseDatePic validationState, validationBehavior, visibleMonths = 1, + firstDayOfWeek, pageBehavior = "visible", calendarWidth = 256, isDateUnavailable, @@ -215,6 +216,7 @@ export function useDatePickerBase(originalProps: UseDatePic onHeaderExpandedChange: setIsCalendarHeaderExpanded, color: isDefaultColor ? "primary" : originalProps.color, disableAnimation, + firstDayOfWeek, }, restUserCalendarProps, ), diff --git a/packages/components/date-picker/stories/date-picker.stories.tsx b/packages/components/date-picker/stories/date-picker.stories.tsx index 5c6439a0d6..b6d979f0ad 100644 --- a/packages/components/date-picker/stories/date-picker.stories.tsx +++ b/packages/components/date-picker/stories/date-picker.stories.tsx @@ -693,3 +693,11 @@ export const WithDateInputClassNames = { description: "Please enter your birth date", }, }; + +export const FirstDayOfWeek = { + render: Template, + args: { + ...defaultProps, + firstDayOfWeek: "mon", + }, +}; diff --git a/packages/components/date-picker/stories/date-range-picker.stories.tsx b/packages/components/date-picker/stories/date-range-picker.stories.tsx index 02117b77bf..802c74ac62 100644 --- a/packages/components/date-picker/stories/date-range-picker.stories.tsx +++ b/packages/components/date-picker/stories/date-range-picker.stories.tsx @@ -799,3 +799,11 @@ export const CustomStyles = { }, }, }; + +export const FirstDayOfWeek = { + render: Template, + args: { + ...defaultProps, + firstDayOfWeek: "mon", + }, +}; From a77e90ad230a8fc9af3d01f066b3527ff1714211 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 17 Feb 2025 23:57:20 +0800 Subject: [PATCH 06/10] feat(docs): add firstDayOfWeek --- apps/docs/content/docs/components/date-picker.mdx | 12 ++++++++++++ .../content/docs/components/date-range-picker.mdx | 12 ++++++++++++ 2 files changed, 24 insertions(+) diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx index 729a048a57..22c0804698 100644 --- a/apps/docs/content/docs/components/date-picker.mdx +++ b/apps/docs/content/docs/components/date-picker.mdx @@ -233,6 +233,12 @@ By default, the calendar popover displays a single month. The `visibleMonths` pr +### Custom first day of week + +By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. + + + ### Page Behavior By default, when pressing the next or previous buttons, pagination will advance by the `visibleMonths` value. This behavior can be changed to page by single months instead, by setting `pageBehavior` to `single`. @@ -435,6 +441,12 @@ import {I18nProvider} from "@react-aria/i18n"; description: "The number of months to display at once. Up to 3 months are supported.", default: "1" }, + { + attribute: "firstDayOfWeek", + type: "sun | mon | tue | wed | thu | fri | sat", + description: "The day that starts the week.", + default: "-" + }, { attribute: "selectorIcon", type: "ReactNode", diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx index 95d093a574..3f8ea9a664 100644 --- a/apps/docs/content/docs/components/date-range-picker.mdx +++ b/apps/docs/content/docs/components/date-range-picker.mdx @@ -66,6 +66,12 @@ By default, the calendar popover displays a single month. The `visibleMonths` pr +### Custom first day of week + +By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. + + + ### Page Behavior By default, when pressing the next or previous buttons, pagination will advance by the `visibleMonths` value. This behavior can be changed to page by single months instead, by setting `pageBehavior` to `single`. @@ -530,6 +536,12 @@ You can customize the `DateRangePicker` component by passing custom Tailwind CSS description: "The number of months to display at once. Up to 3 months are supported.", default: "1" }, + { + attribute: "firstDayOfWeek", + type: "sun | mon | tue | wed | thu | fri | sat", + description: "The day that starts the week.", + default: "-" + }, { attribute: "autoFocus", type: "boolean", From 0aaf1d693a7bd7afa3488e082e2f9903a60962d9 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 17 Feb 2025 23:57:49 +0800 Subject: [PATCH 07/10] feat(changeset): add changeset --- .changeset/itchy-monkeys-run.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/itchy-monkeys-run.md diff --git a/.changeset/itchy-monkeys-run.md b/.changeset/itchy-monkeys-run.md new file mode 100644 index 0000000000..d20944f60f --- /dev/null +++ b/.changeset/itchy-monkeys-run.md @@ -0,0 +1,6 @@ +--- +"@heroui/date-picker": patch +"@heroui/calendar": patch +--- + +add `firstDayOfWeek` From 4534534938d9d0966a07cd0018f2c63b93bc639b Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 18 Feb 2025 00:02:43 +0800 Subject: [PATCH 08/10] feat: add firstDayOfWeek option in storybook --- packages/components/calendar/stories/calendar.stories.tsx | 4 ++++ .../components/calendar/stories/range-calendar.stories.tsx | 4 ++++ .../components/date-picker/stories/date-picker.stories.tsx | 4 ++++ .../date-picker/stories/date-range-picker.stories.tsx | 4 ++++ 4 files changed, 16 insertions(+) diff --git a/packages/components/calendar/stories/calendar.stories.tsx b/packages/components/calendar/stories/calendar.stories.tsx index cfd037ef25..8b8588e238 100644 --- a/packages/components/calendar/stories/calendar.stories.tsx +++ b/packages/components/calendar/stories/calendar.stories.tsx @@ -44,6 +44,10 @@ export default { type: "boolean", }, }, + firstDayOfWeek: { + control: "select", + options: [undefined, "sun", "mon", "tue", "wed", "thu", "fri", "sat"], + }, }, } as Meta; diff --git a/packages/components/calendar/stories/range-calendar.stories.tsx b/packages/components/calendar/stories/range-calendar.stories.tsx index 10a0c875a7..9b64ce8bd6 100644 --- a/packages/components/calendar/stories/range-calendar.stories.tsx +++ b/packages/components/calendar/stories/range-calendar.stories.tsx @@ -42,6 +42,10 @@ export default { }, options: ["narrow", "short", "long"], }, + firstDayOfWeek: { + control: "select", + options: [undefined, "sun", "mon", "tue", "wed", "thu", "fri", "sat"], + }, }, } as Meta; diff --git a/packages/components/date-picker/stories/date-picker.stories.tsx b/packages/components/date-picker/stories/date-picker.stories.tsx index b6d979f0ad..e6d996403c 100644 --- a/packages/components/date-picker/stories/date-picker.stories.tsx +++ b/packages/components/date-picker/stories/date-picker.stories.tsx @@ -70,6 +70,10 @@ export default { }, options: ["aria", "native"], }, + firstDayOfWeek: { + control: "select", + options: [undefined, "sun", "mon", "tue", "wed", "thu", "fri", "sat"], + }, }, decorators: [ (Story) => ( diff --git a/packages/components/date-picker/stories/date-range-picker.stories.tsx b/packages/components/date-picker/stories/date-range-picker.stories.tsx index 802c74ac62..7dcdfc0c8a 100644 --- a/packages/components/date-picker/stories/date-range-picker.stories.tsx +++ b/packages/components/date-picker/stories/date-range-picker.stories.tsx @@ -71,6 +71,10 @@ export default { }, options: ["aria", "native"], }, + firstDayOfWeek: { + control: "select", + options: [undefined, "sun", "mon", "tue", "wed", "thu", "fri", "sat"], + }, }, decorators: [ (Story) => ( From 820bec84b270d3cf25c4699038040f5decb1c0be Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 18 Feb 2025 00:05:22 +0800 Subject: [PATCH 09/10] feat(docs): export firstDayOfWeek --- apps/docs/content/components/date-range-picker/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/docs/content/components/date-range-picker/index.ts b/apps/docs/content/components/date-range-picker/index.ts index 2f64826bed..6c4a3f652e 100644 --- a/apps/docs/content/components/date-range-picker/index.ts +++ b/apps/docs/content/components/date-range-picker/index.ts @@ -17,6 +17,7 @@ import minAndMaxDate from "./min-and-max-date"; import internationalCalendar from "./international-calendar"; import unavailableDates from "./unavailable-dates"; import visibleMonth from "./visible-month"; +import firstDayOfWeek from "./first-day-of-week"; import pageBehavior from "./page-behavior"; import nonContigous from "./non-contiguous"; import presets from "./presets"; @@ -43,6 +44,7 @@ export const dateRangePickerContent = { internationalCalendar, unavailableDates, visibleMonth, + firstDayOfWeek, pageBehavior, nonContigous, presets, From 6bbdc126cbdbdcb069acfcc20ae9bdb93965efd4 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 18 Feb 2025 00:16:25 +0800 Subject: [PATCH 10/10] chore(docs): update title --- apps/docs/content/docs/components/calendar.mdx | 2 +- apps/docs/content/docs/components/date-picker.mdx | 2 +- apps/docs/content/docs/components/date-range-picker.mdx | 2 +- apps/docs/content/docs/components/range-calendar.mdx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx index c6604286bb..2797ba11fd 100644 --- a/apps/docs/content/docs/components/calendar.mdx +++ b/apps/docs/content/docs/components/calendar.mdx @@ -121,7 +121,7 @@ By default, the Calendar displays a single month. The `visibleMonths` prop allow By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. - + ### Page Behaviour diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx index 22c0804698..7131ccf3d9 100644 --- a/apps/docs/content/docs/components/date-picker.mdx +++ b/apps/docs/content/docs/components/date-picker.mdx @@ -237,7 +237,7 @@ By default, the calendar popover displays a single month. The `visibleMonths` pr By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. - + ### Page Behavior diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx index 3f8ea9a664..8aa0da9f4a 100644 --- a/apps/docs/content/docs/components/date-range-picker.mdx +++ b/apps/docs/content/docs/components/date-range-picker.mdx @@ -70,7 +70,7 @@ By default, the calendar popover displays a single month. The `visibleMonths` pr By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. - + ### Page Behavior diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx index 3821297647..0571fe2c92 100644 --- a/apps/docs/content/docs/components/range-calendar.mdx +++ b/apps/docs/content/docs/components/range-calendar.mdx @@ -129,7 +129,7 @@ By default, the Calendar displays a single month. The `visibleMonths` prop allow By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`. - + ### Page Behaviour