React Full Calendar：过去的日期单元格变灰答案

【问题标题】：React Full Calendar: Grey out dates cells in the pastReact Full Calendar：过去的日期单元格变灰
【发布时间】：2018-04-20 16:15:40
【问题描述】：

https://github.com/intljusticemission/react-big-calendar

我过去正在使用反应大日历并尝试向日期单元格添加自定义样式。不知道如何在没有 jQuery 的情况下解决这个问题？

<div className="col-xs-12 col-md-8">
 <BigCalendar
  events={ rentals.concat([ rental ]) }
  selectable
  views={ ['month', 'agenda'] }
  onSelectSlot={ rental => actions.selectRental(rental, sportingGood, agreedToTerms) }/>
</div>

【问题讨论】：

如果你知道类名，那么我们可以用 !important 覆盖它以使其简单？
鉴于没有可识别过去日期的类，看来您必须override 一个或多个组件才能有条件地应用您自己的类。

标签： reactjs react-big-calendar

【解决方案1】：

就像 Fubar 提到的那样，我通过覆盖日期单元格包装组件来实现这一点。

<div className="col-xs-12 col-md-8">
 <BigCalendar
  events={ rentals.concat([ rental ]) }
  selectable
  views={ ['month', 'agenda'] }
  onSelectSlot={ rental => actions.selectRental(rental, sportingGood, agreedToTerms) }
  components={{
   dateCellWrapper: DateCell
  }}/>
</div>


const DateCell = ({
 range,
 value,
 children
}) => {

 const now = new Date();
 now.setHours(0,0,0,0);

 return (
  <div className={ value < now ? "date-in-past" : "" }>
   { children }
  </div>
 )

}

.date-in-past {
 width: 14.3%;
 background: #ccc;
 border-right: solid 1px #fff;
}

【讨论】：

它不会在日期单元格上添加 div，它只是在日期单元格下添加一个 div。