Is it possible to create a calendar that can select multiple dates with useCalendar?

[danthareja]

Is it possible to track multiple dates within useCalendar, or some lower-level API?

The docs I read suggest only a single date can be used as the value attribute.

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}
    />
  );
}

[reidbarber]

Not with the current hooks. You would basically need a version of useCalendarState and useCalendar that supports multiple selected values. So in place of CalendarState, make something like MultiCalendarState:

react-spectrum/packages/@react-stately/calendar/src/types.ts

Lines 97 to 102 in d10f20a

	export interface CalendarState extends CalendarStateBase {
	/** The currently selected date. */
	readonly value: CalendarDate,
	/** Sets the currently selected date. */
	setValue(value: CalendarDate): void
	}

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.

[danthareja]

@reidbarber - thanks for the lead, i'll see how it goes!

[brielov]

@danthareja have you implemented this? If so, would you mind sharing your solution?

[jpbesgen]

Hey @danthareja @reidbarber @brielov! Have any of you implemented this? I'd love to see your implementation if so :)
I have similar requirements for a date picker and am currently evaluating if react-spectrum is a good option

[danthareja]

@brielov @jpbesgen - No updates from me, sorry. I ended up switching to React Day Picker for my project

[timurmaio]

I ended up with a solution from scratch. It lacks all the features that React Aria provides, but it can handle multiple values and multiple ranges. The only way to use React Aria here is to fork some hooks, but that could lead to unexpected behavior. Another option is to contribute directly, but I'm a bit scared to do that now because I don't feel confident enough yet. However, I do think this functionality can be helpful and I would definitely like to contribute in the future because I use React Aria and I find this work monumental. Kudos to the developers!