Switch to month containing selected week in react-calendar

111 Views Asked by At

I am using react-calendar to create a custom calendar which selects a week on click of a week number. I have a separate div with a list of week numbers (since they are custom weeks and not calendar weeks). Selecting a custom date range is also enabled.

On click of a week number, the selected dates are highlighted. However, on selecting a custom date range, then clicking on a week number, the calendar isn't switched to the month containing the selected week.

Is there a way to switch to the month containing the selected week?

{weeks.map((week) => (
  <button
    onClick={() =>
      handleWeekClick(
        week.number,
        week.startDate,
        week.endDate
      )
    }
  >
    {week.number}
    </button>
))}



<Calendar
  activeStartDate={activeStartDate}
  onChange={handleDateChange}
  tileClassName={tileClassName}
  onActiveStartDateChange={handleActiveDateChange}
  selectRange
  value={[new Date(startDate), new Date(endDate)]}
/>

I tried adding 'activeStartDate' prop. This switches to the month containing the selected week but the navigation buttons (to switch between months) get disabled. Adding 'onActiveStartDateChange' along with it did not work either.

0

There are 0 best solutions below