React-calendar: Showing two months at a time for range selection

[ritz078]

Thanks for this awesome component. 🎉 The no styling part makes this the best available solution for me. ❤️

I wanted to know if there is a way to show two months side by side for range view as generally, it makes sense if we are selecting a range.

I want something just like this.

[wojtekmaj]

Hello,
I think that's an awesome idea! Shouldn't be super hard to implement, too. I'm afraid that at the moment I'm super busy in my personal life, but I'm definitely keeping this in my backlog.

[wojtekmaj]

Coming soon... 👀

[jatindumka]

Hi @wojtekmaj

Can a monthly rangepicker and yearly range picker also be achieved in new release???

[wojtekmaj]

Yes, absolutely. showDoubleView will show two months/years/decades/centuries side by side.

[jatindumka]

Hey @wojtekmaj
How you are implementing MonthView, YearView, DecadeView, CenturyView .
There is no demo code for these . Tried these as named export and default export , did not work for me.
I m using v3 beta.
If you could explain on how to achieve month range selector , i.e just 2 month range panels similar to showDoubleView in Calendar.
Thnx.

[wojtekmaj]

@jatindumka Use Calendar compononent, with prop showDoubleView + minDetail set to "month" if you don't want users to be able to select year/decade/century tanges.

[zigotica]

Hi,

Is it possible to decouple the showDoubleView and the showFixedNumberOfWeeks? It actually causes some very weird behaviours like:

1. complete next/prev weeks unnecessarily shown in the other view
2. rangeStart/rangeEnd being shown twice in some scenarios

Thank you anyway for the great component

[zigotica]

It can be "hacked" with a bit of CSS but shouldn't it be better to just avoid it?

.react-calendar__month-view__days__day--neighboringMonth:nth-last-of-type(7),
.react-calendar__month-view__days__day--neighboringMonth:nth-last-of-type(7) ~ .react-calendar__month-view__days__day--neighboringMonth {
  display: none;
}

Cheers

[wojtekmaj]

Actually decoupling showFixedNumberOfWeeks would just remove the last row on the right column in your case. I don't see how that would help...

Regarding pt 2, using class .react-calendar__month-view__days__day--neighboringMonth you should be able to style range in neighboring month just fine.

[zigotica]

I just hide all the.react-calendar__month-view__days__day--neighboringMonth days, problem solved. Thank you anyway for the component.