React-calendar: How can I prevent the list of months being shown on clicking the month name?

[SharonGilmore]

I'm using this plugin within a date picker component. I want the user to be able to navigate back and forth between dates, BUT I don't want them to be able to click the Month ('June 2020') in the navigation bar. I think it will be confusing for my users if they click that and the months appear.

Is there a way to disable this functionality?

[HARIKSREEE]

HI @SharonGilmore
You can try adding pointer-events:none to the .react-calendar__navigation__label.

Anyway you will be making some style changes to the calendar. There is an option to provide our own class name to the calendar wrapper. So we can override the styles using that.

The style would look like:
Note: you need to do this within your custom class to avoid style bleeding.

button.react-calendar__navigation__label {
  pointer-events: none;
}

[SharonGilmore]

Thank you! That worked!

[wojtekmaj]

You can use minDetail and maxDetail props to limit the views users will be able to navigate through.

[SharonGilmore]

Oh, brilliant, thank you!

[hjrobinson]

The CSS pointer events solution didn't work for me. Although clicking is disabled you can still tab on to the button and click enter to open it. Also AFAIK you can't set maxDetail to "day" so the month calendar can still be opened. I love this calendar but I'm thinking the ability to open the month calendar might be confusing to vision impaired users. If I'm missing something please let me know.

[hjrobinson]

I found a hacky solution to this issue using CSS below:

button.react-calendar__navigation__label {
  visibility: hidden;
}

.react-date-picker, .react-date-picker *, .react-date-picker *:before, .react-date-picker *:after {
  visibility: visible;
}

If there are any problems with this or anyone knows a better solution let me know.