I want to make hover on dates in react-calendar
How to display some content for dates in react-calendar when you hover a mouse on dates
<Calendar
style={{ height: 500 }}
onChange={this.onChange}
value={this.state.date}
/>;
I want to make hover on dates in react-calendar
How to display some content for dates in react-calendar when you hover a mouse on dates
<Calendar
style={{ height: 500 }}
onChange={this.onChange}
value={this.state.date}
/>;
If we are talking about this library: https://www.npmjs.com/package/react-calendar,
You can leverage the tileContent property. This lets you inject whatever you want into each tile. You can inject a div with opacity 0 that has a onMouseEnter function that does whatever you like on a mouse hover. Here's an example:
<Calendar
style={{ height: 500 }}
onChange={this.onChange}
value={this.state.date}
tileContent={
({ activeStartDate, date, view }) => {
return view === 'month' && date.getDay() === 0
? <p onMouseEnter={
//do whatever you want
console.log('hi')
}>It's Sunday!</p>
: null
}
}
/>;