How to display some content for dates in react-calendar when you hover a mouse on dates

Question

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}
/>;

Answer 1

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
    }
  }
/>;