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:

[swee76]

any update to this?

[swee76]

@wojtekmaj How to make the calendar keep on the same side when click on the value which is in right side? I wanted to create a calendar which is important to filter past 3 months of data. So basically current month should be on right side, instead of left side.. Whatever that, when click on the any date which is in right side calendar month moves to the left side, please could you fix this?

[lauterry]

Hello

Please re consider fixing this issue please ?

Thank you.

[Nmkop1]

Great calendar, just how to disable this moving the month to the left, after clicking on the value located on the right.

[MarcosMoraes23]

Same problem here.

Any updates ?

[svekko]

Solution I used, seems to work fine for me. Maybe It's useful to someone else too:

Make activeStartDate controlled:

const [activeStartDate, setActiveStartDate] = useState(new Date());

Set following props on Calendar component:

goToRangeStartOnSelect={false}
activeStartDate={activeStartDate}

On activeStartDate do following so that onChange event doesn't trigger activeStartDate change:

onActiveStartDateChange={(data) => {
    if (data.action !== "onChange") {
        setActiveStartDate(data.activeStartDate);
    }
}}