Double view calendar switches activeStartDate to the next month when the date is selected on the right

[majsterkoo]

Hi,
I'm using ReactCalendar in uncontrolled mode. How I can prevent calendar to switch to next month if click on date on right side in showDoubleView? When on left is June, on right July, then after select some date in July calendar render July in left side and next month is showed in right side.

//fetchWeeks - function to call api request for other component
<ReactCalendar showWeekNumbers showDoubleView onChange={fetchWeeks} defaultValue={today} />

Thanks for help/advice.

[carlosbensant]

The UX experience is being affected by this issue (there should be a way to disable it).

[lauterry]

Hi

Has someone found a workaround to disable this behavior please ? Or Can the author provide a props to disable it please ?

Thx a lot

Best regards

[leolozes]

I think this behaviour should be configurable. However, I think what it really needs is an animation to show the transition to the user. Right now it's really difficult for the user to see what is going on.

[lauterry]

I have just opened an issue to request an animation to show the transition to the user

#483

[ernie-h]

If you look at this issue, OP seems to have run into a similar problem. He hacked together a solution by changing the activeStartDate prop through the onActiveStartDateChange and onChange handler.

Digging through the react-calendar code, the problem while in double view is that the onChange handler in Calendar.jsx sets an activeStartDate each time, which is why clicking on the next month teleports you there.

onChange = (value, event) => { 
... 
this.setStateAndCallCallbacks({	    
      activeStartDate: nextActiveStartDate,
      value: nextValue,
    });
}

A possible solution would be to add a showDoubleView condition that only sets activeStartDate: nextActiveStartDate when you are in a single month view.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.

[leolozes]

Edit: nevermind, we implemented our own calendar.

Any updates on this? The issue has been closed, but the UX is still quite bad, and a lot of users don't understand what is going on and end up selecting a much bigger range than intended.

A quick demo to see the effect and understand the problem. The user doesn't move his cursor, but is automatically positioned in the next month: