Reactjs 如何在日历中标记特定日期

如何在中突出显示特定日期

这是我的代码：

<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>

date.getDay（）==0}
心仪的={
新日期（）
}
>

以下是一种常见的方法，可以了解如何使用一些您不熟悉的LIB调整样式

如果查看DOM树，您会发现每个日期按钮都有如下所示的

class

...

通过改变它的样式，我们发现这是我们想要处理的元素

注意类名

react-calendar\uu tile

如果我们通过搜索类名的

tile

来签出它们。你会发现：

tileClassName
将应用于给定日历项的类名（月日视图、年月视图等）

通过向它提供css类，您可以自定义您的样式

例如，让它变成蓝色

<Calendar
  tileClassName="content"
  ...
/>

你可以自己在这里试试

---

您正在使用react日历。您可以很容易地突出显示日期

创建一个类

突出显示
（名称可以是任何内容）

导入该样式文件（.css或.scss）

它有一个名为

tileClassName

的道具。发送一个如下所示的回调

    <Calendar
      tileClassName={({ date, view }) => {
       // date will return every date visible on calendar and view will view type (eg. month)
       if(// your_condititon ){
         return 'highlight'; // your class name
        }

      }}
      onChange={this.onChange}
      value={this.state.date}
    />

{
//date将返回日历上可见的每个日期，view将返回view类型（例如月份）
如果（//您的条件）{
返回“highlight”；//您的类名
}
}}
onChange={this.onChange}
值={this.state.date}
/>

---

我解决了问题…….我修改了代码

CSS代码

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

最后，日历将如下所示

{
if（mark.find（x=>x==时刻（日期）.format（“DD-MM-YYYY”））{
返回“突出显示”
}
}}
tileDisabled={（{date}）=>date.getDay（）==0}
/*maxDate={新日期（2020,1,0）}*/
心仪的={
新日期（）
}
>

输出

---

想让一些日期变得像我上面发布的那样精彩吗？是的，只需检查日期是否为“你的日期”，然后返回课程即可。它会突出日期。不，它不适合我。你能给我一个突出显示2020年3月23、24、25日的例子吗？可能吗？我会警告这是一个o（n^2）操作，数组应该更改为哈希集

marks=new set（['04-03-2020'，03-03-2020'，05-03-2020'，etc…]）

，而不是使用

标记。find（…）

o（n），你可以使用

marks.has（…）

o（1）。因此，随着标记天数的增加，性能不会降低。

  .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>