Is it possible to create a calendar that can select multiple dates with useCalendar
?
#3657
-
Is it possible to track multiple dates within The docs I read suggest only a single date can be used as the I'd love to create a component that looks like this: WIth a component API that looks like this: import {parseDate} from '@internationalized/date';
function Example() {
let [values, setValues] = React.useState([
parseDate('2022-10-03'),
parseDate('2022-10-14'),
parseDate('2022-10-19'),
]);
return (
<Calendar
values={values}
onChange={setValues}
/>
);
} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
Not with the current hooks. You would basically need a version of react-spectrum/packages/@react-stately/calendar/src/types.ts Lines 97 to 102 in d10f20a export interface MultiCalendarState extends CalendarStateBase {
/** The currently selected dates. */
readonly values: Set<CalendarDate>,
/** Sets the currently selected dates. */
setValues(value: Set<CalendarDate>): void
} then make versions of those two hooks that interact with the set of values instead of just one. |
Beta Was this translation helpful? Give feedback.
Not with the current hooks. You would basically need a version of
useCalendarState
anduseCalendar
that supports multiple selected values. So in place ofCalendarState
, make something likeMultiCalendarState
:react-spectrum/packages/@react-stately/calendar/src/types.ts
Lines 97 to 102 in d10f20a