Strange Behaviour in useRangeCalendar When Selecting Range

[MattHeslington]

Hello,

I've been pulling my hair out trying to work out what's going on in my RangeCalendar when selecting a range. As you can see from the clip below, I'm using the 'isDateUnavailable' prop to display blocked dates. However, when I start to select a range of dates, if a visible CalendarGrid has dates which are 'isUnavailable', anyy dates after those which are unavailable are also displayed as blocked while I am selecting the range.

calendar-bug.mov

I'm basically using the example styling from the given Tailwind example in the docs, just with styling for 'isUnnavailable':

        <td {...cellProps} className={`relative py-0.5 ${isFocusVisible ? 'z-10' : 'z-0'}`}>
            <div
                {...mergeProps(buttonProps, focusProps)}
                ref={ref}
                hidden={isOutsideMonth}
                className={`group outline-none lg:h-[46px] lg:w-[46px] xl:h-[51px] xl:w-[51px] ${isRoundedLeft ? 'rounded-l-full' : ''} ${
                    isRoundedRight ? 'rounded-r-full' : ''
                } ${isSelected ? 'bg-gray-7' : ''} ${isDisabled || isUnavailable ? 'disabled' : ''}`}>
                <div
                    className={`flex h-full w-full items-center justify-center rounded-full ${
                        isDisabled || isUnavailable ? 'text-gray-8 line-through' : ''
                    } ${
                        // Focus ring, visible while the cell has keyboard focus.
                        isFocusVisible ? 'group-focus:z-2 ring-2 ring-violet-600 ring-offset-2' : ''
                    } ${
                        // Darker selection background for the start and end.
                        isSelectionStart || isSelectionEnd ? 'bg-gray-12 text-gray-1 hover:bg-gray-11' : ''
                    } ${
                        // Hover state for cells in the middle of the range.
                        isSelected && !(isSelectionStart || isSelectionEnd) ? 'hover:bg-gray-10' : ''
                    } ${
                        // Hover state for non-selected cells.
                        !isSelected && !isDisabled ? 'hover:bg-gray-6' : ''
                    } cursor-default`}>
                    {formattedDate}
                </div>
            </div>
        </td>

Can anyone see if I've made any glaring errors, or what may be causing this please?
Cheers, Matt

[LFDanLu]

Have you taken a look at https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html#non-contiguous-ranges?

[MattHeslington]

Many thanks again, Daniel, you've been a great help