Skip to content

Commit 885d0a7

Browse files
devongovettdevongovett
authored
Update ARIA docs for calendar changes (#3173)
1 parent 8f921ec commit 885d0a7

File tree

4 files changed

+38
-32
lines changed

4 files changed

+38
-32
lines changed

‎packages/@react-aria/calendar/docs/useCalendar.mdx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -136,20 +136,19 @@ function Calendar(props) {
136136

137137
The `CalendarGrid` component will be responsible for rendering an individual month. It is a separate component so that you can render more than one month at a time if you like. It's rendered as an HTML `<table>` element, and React Aria takes care of adding the proper ARIA roles and event handlers to make it behave as an ARIA grid. You can use the arrow keys to navigate between cells, and the <Keyboard>Enter</Keyboard> key to select a date.
138138

139+
The `state.getDatesInWeek` function returns the dates in each week of the month. Note that this always includes 7 values, but some of them may be null, which indicates that the date doesn't exist within the calendar system. You should render a placeholder `<td>` element in this case so that the cells line up correctly.
140+
139141
**Note**: this component is the same as the `CalendarGrid` component shown in the [useRangeCalendar](useRangeCalendar.html) docs, and you can reuse it between both `Calendar` and `RangeCalendar`.
140142

141143
```tsx example render=false export=true
142144
import {useCalendarGrid} from '@react-aria/calendar';
143-
import {startOfWeek, getWeeksInMonth} from '@internationalized/date';
145+
import {getWeeksInMonth} from '@internationalized/date';
144146

145147
function CalendarGrid({state, ...props}) {
146148
let {locale} = useLocale();
147149
let {gridProps, headerProps, weekDays} = useCalendarGrid(props, state);
148150

149-
// Find the start date of the grid, which is the beginning
150-
// of the week the month starts in. Also get the number of
151-
// weeks in the month so we can render the proper number of rows.
152-
let monthStart = startOfWeek(state.visibleRange.start, locale);
151+
// Get the number of weeks in the month so we can render the proper number of rows.
153152
let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
154153

155154
return (
@@ -164,11 +163,13 @@ function CalendarGrid({state, ...props}) {
164163
<tbody>
165164
{[...new Array(weeksInMonth).keys()].map(weekIndex => (
166165
<tr key={weekIndex}>
167-
{[...new Array(7).keys()].map(dayIndex => (
168-
<CalendarCell
169-
key={dayIndex}
170-
state={state}
171-
date={monthStart.add({weeks: weekIndex, days: dayIndex})} />
166+
{state.getDatesInWeek(weekIndex).map((date, i) => (
167+
date ? (
168+
<CalendarCell
169+
key={i}
170+
state={state}
171+
date={date} />
172+
) : <td key={i} />
172173
))}
173174
</tr>
174175
))}

‎packages/@react-aria/calendar/docs/useRangeCalendar.mdx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -135,20 +135,19 @@ function RangeCalendar(props) {
135135

136136
The `CalendarGrid` component will be responsible for rendering an individual month. It is a separate component so that you can render more than one month at a time if you like. It's rendered as an HTML `<table>` element, and React Aria takes care of adding the proper ARIA roles and event handlers to make it behave as an ARIA grid. You can use the arrow keys to navigate between cells, and the <Keyboard>Enter</Keyboard> key to select a date.
137137

138+
The `state.getDatesInWeek` function returns the dates in each week of the month. Note that this always includes 7 values, but some of them may be null, which indicates that the date doesn't exist within the calendar system. You should render a placeholder `<td>` element in this case so that the cells line up correctly.
139+
138140
**Note**: this component is the same as the `CalendarGrid` component shown in the [useCalendar](useCalendar.html) docs, and you can reuse it between both `Calendar` and `RangeCalendar`.
139141

140142
```tsx example render=false export=true
141143
import {useCalendarGrid} from '@react-aria/calendar';
142-
import {startOfWeek, getWeeksInMonth} from '@internationalized/date';
144+
import {getWeeksInMonth} from '@internationalized/date';
143145

144146
function CalendarGrid({state, ...props}) {
145147
let {locale} = useLocale();
146148
let {gridProps, headerProps, weekDays} = useCalendarGrid(props, state);
147149

148-
// Find the start date of the grid, which is the beginning
149-
// of the week the month starts in. Also get the number of
150-
// weeks in the month so we can render the proper number of rows.
151-
let monthStart = startOfWeek(state.visibleRange.start, locale);
150+
// Get the number of weeks in the month so we can render the proper number of rows.
152151
let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
153152

154153
return (
@@ -163,11 +162,13 @@ function CalendarGrid({state, ...props}) {
163162
<tbody>
164163
{[...new Array(weeksInMonth).keys()].map(weekIndex => (
165164
<tr key={weekIndex}>
166-
{[...new Array(7).keys()].map(dayIndex => (
167-
<CalendarCell
168-
key={dayIndex}
169-
state={state}
170-
date={monthStart.add({weeks: weekIndex, days: dayIndex})} />
165+
{state.getDatesInWeek(weekIndex).map((date, i) => (
166+
date ? (
167+
<CalendarCell
168+
key={i}
169+
state={state}
170+
date={date} />
171+
) : <td key={i} />
171172
))}
172173
</tr>
173174
))}

‎packages/@react-aria/datepicker/docs/useDatePicker.mdx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ function CalendarGrid({state, ...props}) {
328328
let {locale} = useLocale();
329329
let {gridProps, headerProps, weekDays} = useCalendarGrid(props, state);
330330

331-
let monthStart = startOfWeek(state.visibleRange.start, locale);
331+
// Get the number of weeks in the month so we can render the proper number of rows.
332332
let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
333333

334334
return (
@@ -343,11 +343,13 @@ function CalendarGrid({state, ...props}) {
343343
<tbody>
344344
{[...new Array(weeksInMonth).keys()].map(weekIndex => (
345345
<tr key={weekIndex}>
346-
{[...new Array(7).keys()].map(dayIndex => (
347-
<CalendarCell
348-
key={dayIndex}
349-
state={state}
350-
date={monthStart.add({weeks: weekIndex, days: dayIndex})} />
346+
{state.getDatesInWeek(weekIndex).map((date, i) => (
347+
date ? (
348+
<CalendarCell
349+
key={i}
350+
state={state}
351+
date={date} />
352+
) : <td key={i} />
351353
))}
352354
</tr>
353355
))}

‎packages/@react-aria/datepicker/docs/useDateRangePicker.mdx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -337,7 +337,7 @@ function CalendarGrid({state, ...props}) {
337337
let {locale} = useLocale();
338338
let {gridProps, headerProps, weekDays} = useCalendarGrid(props, state);
339339

340-
let monthStart = startOfWeek(state.visibleRange.start, locale);
340+
// Get the number of weeks in the month so we can render the proper number of rows.
341341
let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
342342

343343
return (
@@ -352,11 +352,13 @@ function CalendarGrid({state, ...props}) {
352352
<tbody>
353353
{[...new Array(weeksInMonth).keys()].map(weekIndex => (
354354
<tr key={weekIndex}>
355-
{[...new Array(7).keys()].map(dayIndex => (
356-
<CalendarCell
357-
key={dayIndex}
358-
state={state}
359-
date={monthStart.add({weeks: weekIndex, days: dayIndex})} />
355+
{state.getDatesInWeek(weekIndex).map((date, i) => (
356+
date ? (
357+
<CalendarCell
358+
key={i}
359+
state={state}
360+
date={date} />
361+
) : <td key={i} />
360362
))}
361363
</tr>
362364
))}

0 commit comments

Comments
 (0)