Search code examples
reactjsreact-domreact-datepicker

Add background color on the clicked day in React-Calender


I am making calender using react-calender. I able to use to propely but for adding some event on any day, i need to have click event on every clicked day of calendar. I see the 'react-calender' tutorial. They have already a build-in event handler for Day-Click. But i didn't able to grab the current element reference so that i change some of their attribute via DOM manipulation. Please Help.

https://prnt.sc/rlvec9 (Calender Screen)

Calender Component Code

class App extends React.Component {
  constructor(props)
  {
    super(props)
    this.state={
      date:new Date(),
      dayColor:'#fff'

    }
  }
  onChange = date => this.setState({ date })
  render()
  {

  return (
    <div className="App">
       <Calendar
          onChange={this.onChange}
          onClickDay={console.log(this)}
          value={this.state.date}
        />
    </div>
  );
  }
}



Solution

  • Try this:

    onClickDay={(day) => console.log(day) }