Add custom classes for Past & Future dates

[azhr-m]

I can currently apply custom classes for today, outside and booked dates; however, I need to extend this functionality to include custom classes for past and upcoming dates.

modifiersClassNames={({
	booked: 'highlighted',
	today: 'today-custom-class',
	outside: 'outside-month-date',
	"past": 'past',
	"upcoming": 'upcoming"
})}

[gpbl]

@Azhr-Mughl you need to add "modifiers" for past/future

<DayPicker
  modifiers={{
    past: { before: new Date() },
    future: { after: new Date() },
    // upcoming: { after: new Date() }, // as per your code
  }}
  modifiersClassNames={{
     past: "past-date",
     future: "future-date",
     // upcoming: "upcoming", // as per your code
  }}
/>

See this example:

https://codesandbox.io/p/sandbox/react-day-picker-forked-nftt8s?file=%2Fsrc%2FApp.tsx

where past days are blue and future days are red: