RAC: update pageBehavior docs to separate examples (#4682)

Author: reidbarber

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

@@ -421,10 +421,30 @@ 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}}>
+  <header>
+    <Button slot="previous">◀</Button>
+    <Heading />
+    <Button slot="next">▶</Button>
+  </header>
+  <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
+    <CalendarGrid>
+      {date => <CalendarCell date={date} />}
+    </CalendarGrid>
+    <CalendarGrid offset={{months: 1}}>
+      {date => <CalendarCell date={date} />}
+    </CalendarGrid>
+  </div>
+</Calendar>
+```
+
+### Page behavior
+
 The `pageBehavior` prop allows you to control how the calendar navigates between months. By default, the calendar will navigate by `visibleDuration`, but by setting `pageBehavior` to `single`, pagination will be by one month.
 
 ```tsx example
-<Calendar aria-label="Appointment date" visibleDuration={{months: 2}} pageBehavior="single">
+<Calendar aria-label="Appointment date" visibleDuration={{months: 3}} pageBehavior="single">
   <header>
     <Button slot="previous">◀</Button>
     <Heading />
@@ -437,6 +457,9 @@ The `pageBehavior` prop allows you to control how the calendar navigates between
     <CalendarGrid offset={{months: 1}}>
       {date => <CalendarCell date={date} />}
     </CalendarGrid>
+    <CalendarGrid offset={{months: 2}}>
+      {date => <CalendarCell date={date} />}
+    </CalendarGrid>
   </div>
 </Calendar>
 ```

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

@@ -443,10 +443,30 @@ 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}}>
+  <header>
+    <Button slot="previous">◀</Button>
+    <Heading />
+    <Button slot="next">▶</Button>
+  </header>
+  <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
+    <CalendarGrid>
+      {date => <CalendarCell date={date} />}
+    </CalendarGrid>
+    <CalendarGrid offset={{months: 1}}>
+      {date => <CalendarCell date={date} />}
+    </CalendarGrid>
+  </div>
+</RangeCalendar>
+```
+
+### Page behavior
+
 The `pageBehavior` prop allows you to control how the calendar navigates between months. By default, the calendar will navigate by `visibleDuration`, but by setting `pageBehavior` to `single`, pagination will be by one month.
 
 ```tsx example
-<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 2}} pageBehavior="single">
+<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 3}} pageBehavior="single">
   <header>
     <Button slot="previous">◀</Button>
     <Heading />
@@ -459,6 +479,9 @@ The `pageBehavior` prop allows you to control how the calendar navigates between
     <CalendarGrid offset={{months: 1}}>
       {date => <CalendarCell date={date} />}
     </CalendarGrid>
+    <CalendarGrid offset={{months: 2}}>
+      {date => <CalendarCell date={date} />}
+    </CalendarGrid>
   </div>
 </RangeCalendar>
 ```