React Full Calendar：灰色过去的日期单元格

Question

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>

Answer 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;
}