How do you disable clicking on all days in react-calendar?

Question

When I click on days in the month view the days get highlighted, which I would like to disable as the project I'm working on doesn't need to select days. The clicked days get the react-calendar__tile--active class and the callback function of onClickDay gets triggered, but there's no way to prevent this based on the docs.

I do have highlighted dates and I keep track of when a month is changed, but other than that I don't have any interactions with the calendar.

I was thinking of overriding the style of the react-calendar__tile--active class with css but that doesn't hide the hover effect, so I would rather disable the whole functionality from JS.

I've also tried the following js codes, but they didn't do anything:

<Calendar
  onClickDay={(value, event) => {
    event.preventDefault()
    event.stopPropagation()
    console.log('clicked on a day')
    return false
  }}
/>

I've looked at the latest release of react-calendar (version 4.7.0) and it looks like the result of the callback of onClickDay wrapped inside onClickTile is ignored:

https://github.com/wojtekmaj/react-calendar/blob/v4.7.0/packages/react-calendar/src/Calendar.tsx#L788

There is an internal variable called drillDownAvailable that could be "anded" together with the result of onClickTile inside the drillDown function which could be one solution:

const drillDown = useCallback((nextActiveStartDate: Date, event: React.MouseEvent<HTMLButtonElement>) => {
  if (!drillDownAvailable || (onClickTile(nextActiveStartDate, event) ?? true)) {
    return;
  }

  // ...

  const nextView = views[views.indexOf(view) + 1];

Answer 1

I've ended up using CSS anyways:

.react-calendar__viewContainer {
  pointer-events: none;
}