🙋 Feature Request

The useRangeCalendarState should allow controlling the selectionAlignment prop of useCalendarState https://github.com/adobe/react-spectrum/blob/dad2cefcbda8e0e73ce55a9c5054bcc1e74b3eb3/packages/%40react-stately/calendar/src/useCalendarState.ts#L50-L51

🤔 Expected Behavior

Allow setting selectionAlignment

😯 Current Behavior

Does not allow setting selectionAlignment, it is automatically calculated from value

https://github.com/adobe/react-spectrum/blob/dad2cefcbda8e0e73ce55a9c5054bcc1e74b3eb3/packages/%40react-stately/calendar/src/useRangeCalendarState.ts#L52-L60

💁 Possible Solution

There should be a selectionAlignment prop and use the prop value if it is set and fallback to the existing value logic if there is no prop value.

Maybe something like these changes to useRangeCalendarState.ts

export interface RangeCalendarStateOptions<T extends DateValue = DateValue> extends RangeCalendarProps<T> {
    /** The locale to display and edit the value according to. */
    locale: string;
    /**
     * A function that creates a [Calendar](../internationalized/date/Calendar.html)
     * object for a given calendar identifier. Such a function may be imported from the
     * `@internationalized/date` package, or manually implemented to include support for
     * only certain calendars.
     */
    createCalendar: (name: string) => Calendar;
    /**
     * The amount of days that will be displayed at once. This affects how pagination works.
     * @default {months: 1}
     */
    visibleDuration?: DateDuration;
+   /** Determines how to align the initial selection relative to the visible date range. */
+   selectionAlignment?: 'start' | 'center' | 'end';
}

  let calendar = useCalendarState({
    ...calendarProps,
    value: value && value.start,
    createCalendar,
    locale,
    visibleDuration,
    minValue: min,
    maxValue: max,
-   selectionAlignment: alignment
+   selectionAlignment: props.selectionAlignment ?? alignment
  });

🔦 Context

I want to show a range calendar with 2 months but the selection should always be aligned at the start, so it should always start on the left/first month.

💻 Examples

Without this fix, sometimes my range selection start is shown on the right month.

I want it always be shown on the left month.

adobe / react-spectrum

useRangeCalendarState should allow controlling selectionAlignment #4721