React-calendar: Changing activeStartDate does not change calendar view

[mantovanig]

Hi,

I'm trying to use the library with a custom external navigation.
So on click on next/prev of my custom navigation I update the prop "activeStartDate" but the calendar not change.

I saw that the "activeStartDate" in the state of Calendar component is not updated by props.

[wojtekmaj]

Hello @mantovanig,
glad you asked. By default, the calendar displays the month in which value is. If no value is provided, then activeStartDate takes priority.

What do you think about this approach? Is it something you wouldn'y expect? If so, we'll think of some solution!

[mantovanig]

Hello @wojtekmaj ,

I don't think I understood the approach.

Take a look this little example:
https://codesandbox.io/s/3xw8xomn8m

At start you can navigate with "prev/next" button, but if you select a day, you are no longer able to navigate because the activeStartDate prop has lost priority and I can't change the value only to navigation purpose.

I would like to get the browsing behavior of the demo:
http://projekty.wojtekmaj.pl/react-calendar/

Thanks in advance

[wojtekmaj]

Hey there,
as discussed in Pull Request, I have created a separate branch with the change, and I will need to keep it there until version 3 - this is a change of exposed, documented behavior and as such must be considered a breaking change.

Hope you're not in a hurry with this, and if you are, for now you can get the necessary version from the branch on GitHub instead of npm.

[mantovanig]

Hi @wojtekmaj ,

ok perfect!
Don't worry, for the moment, I use git url with the changes in my package json for react-calendar dependence, when you publish the 3.0 I will change it.

Thanks

[balazsorban44]

@mantovanig I think I have the same problem. Could you explain how to change the package.json so it uses the change @wojtekmaj mentioned? Thank you.

I tried: yarn add wojtekmaj/react-calendar#change\/activeStartDate-as-priority

But then I get this error:
Uncaught Error: Cannot find module "react-calendar"
Tried to reinstall the whole node_modules folder.

my package.json:
"react-calendar": "wojtekmaj/react-calendar#change/activeStartDate-as-priority",
and my node_modules folder also has a react-calendar

UPDATE:
I realised, that maybe I have to build the module, so I cd into the react-dates folder, and first ran npm install, than npm run build. Now I get this error:

It cannot deal with an array of values in case of a date range.

[mantovanig]

Hi @balazsorban44

This is what I've done:

• fork react-calendar
• move to branch created by @wojtekmaj

I have created a separate branch with the change

• remove dist from .gitignore
• run build

And in my package json I put directly the commit of my fork:

"react-calendar": "git://github.com/mantovanig/react-calendar.git#1f4f9722f39717939cd7e3910c131e2e45e1c4d0",

If you want you can use the same.

Waiting for 3.0 💪

Cheers

[balazsorban44]

@mantovanig do you use it to pick a range, or a single value?

[mantovanig]

Single value. At the moment I don't use it to pick a range.

[bjenkins24]

@balazsorban44 just tested your commit and this does fix an issue with activeStartDate not being prioritized over value. Seems like a bug fix to me that doesn't need to wait till 3.0?

[wojtekmaj]

That's not a bug, it's just a design approach that, if we decide to change it, has to wait for next major version to be included, if included at all.

Say you have a hotel booking page with this calendar to choose a date of your stay. You'll want the calendar to display the given value and if value is not yet given - display next month. You'd code it like so:

<Calendar
  value={value} // can be null if not set
  activeStartDate={nextMonth} // fallback if value not set
/>

How are you supposed to do that with activeStartDate taking priority over value? That's my main concern and the reason I'm postponing this change.

[luisfuertes]

When i select a range, calendar select tileDisabled days too.

And if i do a async request (GET of available days in thath month) in onActiveDateChange function, calendar view dont update.

[mattcarpowich1]

Here's what I did. Set the date value to today if the month is the same, otherwise let the activeStartDate take priority. Maybe this will help someone

[andyfurniss4]

Seems a bit silly that once you've chosen a date, you can no longer use the navigation, no? I also have this issue and frankly it just seems crazy. If someone chooses a date and then changes their mind... then what?

[gopienkonikita]

Hello @wojtekmaj ,
I use your calendar and use custom navigation panel, but i can't change the activeStartDate and
use value same time. I like to use this calendar.
It's screenshot with my problem:

Navigation is doesn't work... I hope you solve this problem soon.

[wojtekmaj]

You're being heard. React-Calendar's current architecture doesn't allow an easy way around this, but it's on our roadmap for 3.0 - follow #216 for updates.

[wojtekmaj]

Resolved in #217, scheduled for 3.0 as planned.

[yohanelly95]

Hey @wojtekmaj, I can't set an activeStartDate currently, I am passing a value of Thu Aug 27 2020 00:00:00 GMT+0530 (India Standard Time) for example. And my component looks like this
<Calendar onChange={setFromDate} value={fromDate} minDate={new Date()} showNeighboringMonth={true} maxDetail="month" next2Label={null} prev2Label={null} activeStartDate={initialDate} />

What am I doing wrong?
So my use case is that I set values on my calendar, on redirecting I share the values using query params and rerender the component on another page using the previously set date. Any help would be great 🥇

[wojtekmaj]

You shouldn't use values that are not beginning of months/years/decades/centuries (depending on the view) for activeStartDate.