如何在反应日历中标记特定日期

Question

如何在react-calendar中突出显示特定日期？

这是我的代码：

<Calendar
    style={{ height: 500 }}
    onChange={this.onChange}
    value={this.state.date}
    tileContent={d}
    hover={'2020-02-29'}

    tileDisabled={({ date }) => date.getDay() === 0}

    minDate={
        new Date()
    }
></Calendar>

Answer 1

我解决了这个问题......我修改了我的代码

CSS代码

  .highlight {
                color:red;
             }

我创建了一个包含多个日期的数组

const mark = [
      '04-03-2020',
      '03-03-2020',
      '05-03-2020'
  ]

最后，日历将如下所示

<Calendar
    style={{ height: 500 }}
    onChange={this.onChange}
    value={this.state.date}
    tileClassName={({ date, view }) => {
      if(mark.find(x=>x===moment(date).format("DD-MM-YYYY"))){
       return  'highlight'
      }
    }}


    tileDisabled={({ date }) => date.getDay() === 0}

    /*maxDate={new Date(2020, 1, 0)}</div>*/
     minDate={
      new Date()
    }
  >
</Calendar>

输出