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

Question

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

我正在使用 React 大日历并尝试向过去的日期单元格添加自定义样式。如果没有 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;
}

Answer 2

inb4 slotLaneClassNames 和 slotLaneContent 对我不起作用，因为过去的 TIMES 是灰色的。一个相当笨拙但简单的方法是在 .fc-timegrid-now-indicator-line className:

上应用 box-shadow

  .fc-timegrid-now-indicator-line {
    border-color: black;
    box-shadow: 0px -2000px 0px 2000px rgba(0, 0, 0, 0.1);
  }

绝不是一个完美的解决方案，但它对我有用。希望它也能帮助那里的人。

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

React Full Calendar: Grey out dates cells in the past

reactjs

react-big-calendar