Update RAC Calendar docs: change visibleDuration months from 2 to 3 (#…

…4709)
adobe · Jun 26, 2023 · 7186d21 · 7186d21 · rspbot · Jun 26, 2023
1 parent 3c46c32
commit 7186d21
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/react-aria-components/docs/Calendar.mdx b/packages/react-aria-components/docs/Calendar.mdx
@@ -422,7 +422,7 @@ The error message element within a `Calendar` can be targeted with the `[slot=er
 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.
 
 ```tsx example
-<Calendar aria-label="Appointment date" visibleDuration={{months: 2}}>
+<Calendar aria-label="Appointment date" visibleDuration={{months: 3}}>
   <header>
     <Button slot="previous">◀</Button>
     <Heading />
@@ -435,6 +435,9 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
     <CalendarGrid offset={{months: 1}}>
       {date => <CalendarCell date={date} />}
     </CalendarGrid>
+    <CalendarGrid offset={{months: 2}}>
+      {date => <CalendarCell date={date} />}
+    </CalendarGrid>
   </div>
 </Calendar>
 ```

diff --git a/packages/react-aria-components/docs/RangeCalendar.mdx b/packages/react-aria-components/docs/RangeCalendar.mdx
@@ -444,7 +444,7 @@ The error message element within a `RangeCalendar` can be targeted with the `[sl
 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.
 
 ```tsx example
-<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 2}}>
+<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 3}}>
   <header>
     <Button slot="previous">◀</Button>
     <Heading />
@@ -457,6 +457,9 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
     <CalendarGrid offset={{months: 1}}>
       {date => <CalendarCell date={date} />}
     </CalendarGrid>
+    <CalendarGrid offset={{months: 2}}>
+      {date => <CalendarCell date={date} />}
+    </CalendarGrid>
   </div>
 </RangeCalendar>
 ```