Skip to content

Commit 7186d21

Browse files
authored
Update RAC Calendar docs: change visibleDuration months from 2 to 3 (#4709)
1 parent 3c46c32 commit 7186d21

File tree

2 files changed

+8
-2
lines changed

2 files changed

+8
-2
lines changed

packages/react-aria-components/docs/Calendar.mdx

+4-1
Original file line numberDiff line numberDiff line change
@@ -422,7 +422,7 @@ The error message element within a `Calendar` can be targeted with the `[slot=er
422422
Multiple `CalendarGrid` elements can be rendered to show multiple months at once. The `visibleDuration` prop should be provided to the `Calendar` component to specify how many months are visible, and each `CalendarGrid` accepts an `offset` prop to specify its starting date relative to the first visible date.
423423

424424
```tsx example
425-
<Calendar aria-label="Appointment date" visibleDuration={{months: 2}}>
425+
<Calendar aria-label="Appointment date" visibleDuration={{months: 3}}>
426426
<header>
427427
<Button slot="previous">◀</Button>
428428
<Heading />
@@ -435,6 +435,9 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
435435
<CalendarGrid offset={{months: 1}}>
436436
{date => <CalendarCell date={date} />}
437437
</CalendarGrid>
438+
<CalendarGrid offset={{months: 2}}>
439+
{date => <CalendarCell date={date} />}
440+
</CalendarGrid>
438441
</div>
439442
</Calendar>
440443
```

packages/react-aria-components/docs/RangeCalendar.mdx

+4-1
Original file line numberDiff line numberDiff line change
@@ -444,7 +444,7 @@ The error message element within a `RangeCalendar` can be targeted with the `[sl
444444
Multiple `CalendarGrid` elements can be rendered to show multiple months at once. The `visibleDuration` prop should be provided to the `RangeCalendar` component to specify how many months are visible, and each `CalendarGrid` accepts an `offset` prop to specify its starting date relative to the first visible date.
445445

446446
```tsx example
447-
<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 2}}>
447+
<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 3}}>
448448
<header>
449449
<Button slot="previous">◀</Button>
450450
<Heading />
@@ -457,6 +457,9 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
457457
<CalendarGrid offset={{months: 1}}>
458458
{date => <CalendarCell date={date} />}
459459
</CalendarGrid>
460+
<CalendarGrid offset={{months: 2}}>
461+
{date => <CalendarCell date={date} />}
462+
</CalendarGrid>
460463
</div>
461464
</RangeCalendar>
462465
```

0 commit comments

Comments
 (0)