React-calendar: React-Calendar 3.0 roadmap

[wojtekmaj]

Use component as a controlled component - #217

The biggest architecture flaw React-Calendar has at the moment is how activeStartDate, view and value is being set. React-Calendar reacts to props change, but sets their value to its state, and remains uncontrolled.

React-Calendar 3.0 will allow handling it in an controlled way. Similarly to input elements, which can be uncontrolled by setting defaultValue or controlled by setting value and onChange, React-Calendar will allow:

• defaultValue or value & onChange
• defaultActiveStartDate or activeStartDate & onActiveStartDateChange
• defaultView or view & onViewChange

ESM builds - #249

React-Calendar 3.0 will introduce tree-shakeable ESM builds, which should help with bundle size.

Typings no longer included in the package - #273

TypeScript typings will be moved to DefinitelyTyped repository, in an effort to improve its quality, and to reduce maintenance of the main library.

Minor changes & improvements

Some improvements were very small but were postponed because could have been considered breaking.

• Add default styling for today's date - #112

Compatibility

I consider React-Calendar 2.x functional and stable enough to leave it as it is for those who prefer not to update their development environments. Minimum supported version of React will be 16.8. This way we will gain support of React Hooks, Fragments and we will be able to get rid of react-lifecycles-compat we use to support React 15.x and older 16.x versions.

[ekilah]

Just wanted to pop in to support the idea of a controlled component.

Am on the hunt for a calendar that I can customize more than I think react-calendar can currently be customized - and really, I haven't found a single calendar that does that for me yet either. For instance, I want to move the location of the arrow buttons on the month view (and completely overhaul the CSS to match my application, but that seems mostly supported). If there were controlled inputs for what month is currently in view, I could just make my own buttons, and then hopefully hide the default ones.

I think it's totally reasonable to provide a way to not have to control the component at all, like a little wrapper class that keeps the styles and behavior the same, and then exposing what's underneath that as a fully-controlled component. If users of the fully-controlled version want some of the default behavior, they could use default functions to get that stuff back while being able to customize other things.

tl;dr: I think a base component that handles the logic of a calendar (how many days in a given month? how many days/weeks of the previous month to show? etc) that does not assume anything about the UI would be great, and a controlled component is a good start in that direction.

[wojtekmaj]

React-Calendar 3.0 first beta is out. If you have any comments, you can write them here. We need help especially with:

• Whether the components imports fine in your environment?
• Whether controlled mode works fine?
• Whether uncontroled mode works fine?

[sofiyastrochyk]

Not sure if this belongs here, but the import from react-daterange-picker (as described here ) does not seem to work because daterange picker references files directly from the dist folder like this: react-calendar/dist/Calendar.css while the Calendar.css is actually in react-calendar/dist/esm/Calendar.css folder. Can anything be done about this?

[wojtekmaj]

@sofiyastrochyk React-Calendar 3.0.0-beta.5 should have Calendar.css back in dist folder. We will, however, no longer include it by default so it would be up to the developer (or 3rd party package's developer) to import it.

[wojtekmaj]

How y'all like the algorithm behind selecting initial view in React-Calendar 3.0?

• Use activeStartDate
• If not given, use defaultActiveStartDate
• If not given, find it based on value
• If not given, find it based on defaultValue
• If not given, find it based on today's date

[zorfling]

Hi @wojtekmaj - how far from release is 3.0.0? I'm just starting a build and wondering if I should start with 2.19.2 or 3.0.0-beta.5? Thanks!

[wojtekmaj]

Depends on whether you plan to use it as controlled, or uncontrolled component. Usually you'd want to go with uncontrolled and thus you could start with 2.x and upgrading to 3.x is going to be a piece of cake. If you need controlled, you can start with 3.x beta, but it has one blocking issue right now. This issue is what's blocking release and I can't find time to fix this 😭

[zorfling]

Great, thanks, I've gone forward with 2.19.2 for now.
What's the blocking issue? I can't see anything left for milestone 3.0.0, that's why I asked.

[wojtekmaj]

305 was fixed, and as such the only blocker to release v3.0.0 is gone! 🎉

Expect final beta, v3.0.0-beta.6 tomorrow. I'll run it for a while in my own projects, as well as listen to your feedback, before the final v3.0.0 release.

[wojtekmaj]

React-Calendar 3.0 is released.