useCalendarState how to display x days starting from a date

[snax4a]

Hey, I am trying to display something like a week calendar but I don't want to start from the start of the week but I would like to display for example 5 days to the future starting from today.

This is what I have now:

export default function WeekView({ categoryId }: { categoryId: string }) {
  const { locale } = useLocale();
  const state = useCalendarState({
    visibleDuration: { days: 5 },
    isDisabled: true,
    locale,
    createCalendar,
  });
  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
    {
      isReadOnly: true,
    },
    state
  );
  const { gridProps } = useCalendarGrid({}, state);

  const startDate = state.visibleRange.start;

  const dateFormatter = useDateFormatter({
    dateStyle: 'long',
    calendar: startDate.calendar.identifier,
  });

  return (
    <section {...calendarProps} className='py-4'>
      <header className='mb-6 text-center text-lg font-bold'>
        {dateFormatter.formatRange(
          state.visibleRange.start.toDate(state.timeZone),
          state.visibleRange.end.toDate(state.timeZone)
        )}
      </header>
      <div className='grid grid-cols-[auto_1fr_auto] items-center gap-6'>
        <AriaButton
          props={prevButtonProps}
          customProps={{ title: 'Poprzedni tydzień', icon: ChevronLeftIcon }}
        />
        <table {...gridProps} className='table-fixed'>
          <tbody>
            <tr className='grid grid-cols-7 justify-center'>
              {state
                .getDatesInWeek(0, startDate)
                .map((date, i) =>
                  date ? (
                    <CalendarCell
                      key={i}
                      date={date}
                      state={state}
                      categoryId={categoryId}
                    />
                  ) : (
                    <td key={i} />
                  )
                )}
            </tr>
          </tbody>
        </table>
        <AriaButton
          props={nextButtonProps}
          customProps={{ title: 'Następny tydzień', icon: ChevronRightIcon }}
        />
      </div>
    </section>
  );
}

This is what gets rendered:

Why state.visibleRange is different from what gets rendered?
As you see on the heading visible range is from 31.08 to 04.09 which is 5 days as configured in visibleDuration but It is rendering 7 days (29.08 to 04.09). This is probably because of .getDatesInWeek(0, startDate) but I passed start date here so I thought it should get dates from that startDay.

How can I map over visible range days? I feel like getDatesInWeek is not correct here but I only found this one in docs.

Maybe these calendar hooks are not appropriate for what I am trying to achieve.
I would like to display x days starting from some date and want to be able to navigate back and forth in the calendar.

I would be glad if someone could guide me on how can I combine react aria hooks to achieve that.

[devongovett]

Yes, getDatesInWeek always returns a week's worth of dates. It's meant to be a helper for month or week based calendars. You'll need to generate the dates yourself based on the visibleRange. Something like this:

let dates = [];
let date = state.visibleRange.start;
while (date.compare(state.visibleRange.end) <= 0) {
  dates.push(date);
  date = date.add({days: 1});
}