First week as current week?

[khpa]

I'm trying to set the calendar view to have the current week as the first rendered row, is it possible?, I've looked in the docs, couldn't find anything.

[markstory]

I am also interested in this behavior. It would be useful for build scheduling functionality where the only valid options are those in the future.

I am still thinking through how a new prop to toggle this behavior would work with other rendering props. Features like paging should disable when the current day is reached.

[markstory]

Depending on your requirements this could be achieved with the current daypicker features. I was able to get behavior that worked for my usage with the following:

import startOfWeek from 'date-fns/startOfWeek';

const todayDate = new Date();
const daypickerModifiers = {
  past: {
    before: startOfWeek(todayDate),
  },
};

<DayPicker
    disabledDays={{before: new Date()}}
    modifiers={daypickerModifiers}
    fromMonth={todayDate}
    selectedDays={dueOn}
    todayButton={t('Today')}
    pagedNavigation
/>

In my CSS I added the following

.DayPicker-Day--past {
  display: none;
}

This will hide all the days before the current week and gets what I was looking for.

[gpbl]

@markstory solution is a good way to hide them!

I was curious to see how it could be accomplished with v8, so I used your case as example here:

https://react-day-picker-next.netlify.app/guides/custom-components#example-disable-rows-in-the-past

function isPastDate(date) {
  return differenceInCalendarDays(date, new Date()) < 0;
}

function OnlyFutureRow(props: RowProps) {
  const isPastRow = props.dates.every(isPastDate);
  if (isPastRow) return <></>;
  return <Row {...props} />;
}

export default function App() {
  return (
    <DayPicker
      fromDate={new Date()}
      components={{ Row: OnlyFutureRow }}
      hidden={isPastDate}
      showOutsideDays
      enableOutsideDaysClick
    />
  );
}