React-calendar: Changing value prop of Calendar does not change the month view of selected date

[Muttakee31]

I am maintaining a list of dates and react-calendar in a page. When I click on the list. the month that holds the date is shown in the calendar.
But when I click on a day block in the calendar and then if I click on the list of dates, it does not switch to that particular month.

From what I have been able to debug, when the value state in the Calendar component is set to undefined, the month switching works fine. After clicking on calendar, the value is set to the clicked date, and things stop working.

<Calendar  value={date}
        activeStartDate={date
        tileClassName={tileClassName}
        calendarType='Hebrew'
        onClickDay={activateTab}
        minDetail='year'
                />

and the functions are here -

const activateTab = (value, event) => {
        offList.map((instant, index) => {
            if (dayjs(instant.date).format('DD-MM-YYYY') === dayjs(value).format('DD-MM-YYYY')) {
                setTab(instant.id);
                setDate(value);
            }
        });

    };

   const tileClassName = ({ date, view }) => {
        // Add class to tiles in month view only
       if (view === 'month') {
           if (offList.find(dDate => (dayjs(dDate.date).format('DD-MM-YYYY') == dayjs(date).format('DD-MM-YYYY')))) {
               return 'holiday';
           }
       }
    };

current configs:
"next": "9.4.0",
"react": "16.13.1",
"react-calendar": "^3.1.0",

[giacomocerquone]

I'd say related to #358 we'll wait for the developer of the module and then talk about an implementation if there isn't already some sort of prop we can use

[wojtekmaj]

@giacomocerquone I think it's not actually related, but similar :)

@Muttakee31

I created a CodeSandbox with your code slightly modified and I don't see an issue - when I click a button that updates the date to last April 2020's weekend, I'm correctly moved to April 2020.

https://codesandbox.io/s/react-calendar-controlled-with-value-and-activestartdate-change-bwr6k

The only bug I see is that you can't use navigation arrows in the calendar. React-Calendar is version 3.x, so using activeStartDate (as opposed to defaultActiveStartDate) is telling React-Calendar that you'll handle updating it. Without onActiveStartDateChange will indeed cause the Calendar to be "stuck" on a given month/year/whatever.

It's just like <input> with value but no onChange - if you try typing something in this field, it will not update.

[Muttakee31]

Thank you for explaining how the activeStartDate prop works. :smiley:

I thought only changing the value of value prop in Calendar component would change the view from one month to another. After reading your comment I understood I did not change the value activeStartDate prop manually. Now I did it and it is working fine. Thanks a lot for saving the day.

I also noticed that if I do not use activestartDate prop at all or use defaultActiveStartDate, the same thing happens(month switching stops). This time it does not disable the navigation buttons though. Is that ok?

[Muttakee31]

Well I read the discussion in #358 & I found the answer. should have closed this long ago :3