Skip to content

Commit

Permalink
docs: update localization.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
gpbl committed Dec 26, 2024
1 parent 5c7a719 commit 99a45a9
Showing 1 changed file with 17 additions and 9 deletions.
26 changes: 17 additions & 9 deletions website/docs/docs/localization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,12 @@ DayPicker provides various options to customize the calendar for different langu

- 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. |
| `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

| Prop Name | Type | Description |
| --------- | ------------------------------------------ | ----------------------------------- |
| `locale` | [`Locale`](https://date-fns.org/docs/I18n) | Set the locale. Default is `en-US`. |

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.
Expand Down Expand Up @@ -58,6 +53,10 @@ import { DayPicker, defaultLocale } from "react-day-picker";

## ISO 8601 Calendar

| Prop Name | Type | Description |
| --------- | --------- | ------------------------------------------------------------------------ |
| `ISOWeek` | `boolean` | Switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date). |

Use the `ISOWeek` prop to switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date) instead of the locale setting.

```tsx
Expand Down Expand Up @@ -127,6 +126,10 @@ export function PersianCalendar() {

## Broadcast Calendar

| Prop Name | Type | Description |
| ------------------- | --------- | ------------------------------------ |
| `broadcastCalendar` | `boolean` | Switch to the US Broadcast Calendar. |

Switch to the [US Broadcast Calendar](https://en.wikipedia.org/wiki/Broadcast_calendar) by setting the `broadcastCalendar` prop.

In the broadcast calendar, weeks start on Monday and end on Sunday. Each month has either 28 or 35 days.
Expand All @@ -141,6 +144,11 @@ In the broadcast calendar, weeks start on Monday and end on Sunday. Each month h

## Advanced Localization Options

| Prop Name | Type | Description |
| ----------------------- | --------------------------------------------- | ------------------------------------------------------- |
| `firstWeekContainsDate` | `1` \| `4` | Configure the first date in the first week of the year. |
| `weekStartsOn` | `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7` | Change the first day of the week. |

### First Date of the Week

Use the `weekStartsOn` prop to set the first day of the week.
Expand Down

0 comments on commit 99a45a9

Please sign in to comment.