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:
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];
I've ended up using CSS anyways:
.react-calendar__viewContainer {
pointer-events: none;
}