javascript - 我如何在reactjs中为日历中的特定日期提供颜色

Question

我需要为日历中的特定日期提供颜色。例如周日是假期，所以它应该是红色的，如果这周有任何假期，我需要给它们上色。怎么办？

var React = require('react');
var DatePicker = require('react-datepicker');
var moment = require('moment');

require('react-datepicker/dist/react-datepicker.css');

class Calender extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: moment()
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {

    this.setState({ startDate: date });
  }

  render() {
    return (

      <div className="cal">
        <DatePicker className="datepic"
          inline
          fixedHeight
          fixedWidth
          selected={this.state.startDate}
          onChange={this.handleChange}
          showYearDropdown
          monthsShown={2} />
      </div>
    );
  }
}

export default Calender;

Answer 1

这里有一个关于突出显示日期的部分:

DatePicker Doc

使用突出显示选项将“react-datepicker__day--highlighted”类添加到您选择的特定日期的 div 中。您可以在 css 中覆盖该样式以指定不同的背景颜色、文本颜色等...