diff --git a/website/docs/docs/localization.mdx b/website/docs/docs/localization.mdx index e05fea263..f2f9c6804 100644 --- a/website/docs/docs/localization.mdx +++ b/website/docs/docs/localization.mdx @@ -6,19 +6,22 @@ sidebar_position: 6 DayPicker provides various options to customize the calendar for different languages and regions. +- For time zone support, see the [Time Zone](../docs/time-zone.mdx) guide. + | Prop Name | Type | Description | | ----------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------- | | `locale` | [`Locale`](https://date-fns.org/docs/I18n) | Set the locale. Default is `en-US`. | | `weekStartsOn` | `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7` | Change the first day of the week. | | `firstWeekContainsDate` | `1` \| `4` | Configure the first date in the first week of the year. | -| `timeZone` | `string` | The time zone (IANA or UTC offset) to use in the calendar. | | `ISOWeek` | `boolean` | Switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date). | | `broadcastCalendar` | `boolean` | Switch to the [US Broadcast Calendar](https://en.wikipedia.org/wiki/Broadcast_calendar). | | `jalali` | `boolean` | Switch to the Jalali calendar. | ## Setting the Locale -To change the default `en-US` to another locale, import a locale object from `react-day-picker/locale` and pass it to the`locale` prop. +DayPicker supports all the locales included in the [date-fns](https://date-fns.org/docs/I18n) library. + +- To change the default `en-US` to another locale, import a locale object from `react-day-picker/locale` and pass it to the`locale` prop. ```tsx // import the locale object @@ -53,38 +56,7 @@ import { DayPicker, defaultLocale } from "react-day-picker"; ::: -## Changing the Time Zone {#time-zone} - -See [Time Zone docs](./time-zone.mdx) for more information. - -## Localization Options - -### First Date of the Week - -Use the `weekStartsOn` prop to set the first day of the week. - -```tsx - // Start the week on Sunday -``` - - - - - -### First Week Contains Date - -The `firstWeekContainsDate` prop sets the first day of the year's initial week, which is used to calculate week numbers. Acceptable values are `1` for Monday and `4` for Thursday. - -For more information, see [Week Numbering](https://en.wikipedia.org/wiki/Week#Numbering) on Wikipedia and the [getWeek function](https://date-fns.org/docs/getWeek) from `date-fns`. - -```tsx - -``` - -### ISO Week Dates +## ISO 8601 Calendar Use the `ISOWeek` prop to switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date) instead of the locale setting. @@ -166,3 +138,30 @@ In the broadcast calendar, weeks start on Monday and end on Sunday. Each month h + +## Advanced Localization Options + +### First Date of the Week + +Use the `weekStartsOn` prop to set the first day of the week. + +```tsx + // Start the week on Sunday +``` + + + + + +### First Week Contains Date + +The `firstWeekContainsDate` prop sets the first day of the year's initial week, which is used to calculate week numbers. Acceptable values are `1` for Monday and `4` for Thursday. + +For more information, see [Week Numbering](https://en.wikipedia.org/wiki/Week#Numbering) on Wikipedia and the [getWeek function](https://date-fns.org/docs/getWeek) from `date-fns`. + +```tsx + +```