React Full Calendar: Grey out dates cells in the past

Question

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

I'm using react big calendar and trying to add custom styling to date cells in the past. Not really sure how to go about this without 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>

If you know the className then we can override it with !important to make it simple? — Hema Nandagopal, Nov 08 '17 at 05:03
Given that there is no class to identify past dates, it looks like you're going to have to [override](http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components) one or more components to conditionally apply your own classes. — fubar, Nov 08 '17 at 05:05

score 2 · Accepted Answer · answered Nov 08 '17 at 06:49

Like Fubar mentions, I got this working by overriding the date cell wrapper component.

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

It does not add div on date cells, it just add a div under the date cells. — Hassan Ajaz, Feb 28 '19 at 17:36

score 0 · Answer 2 · answered Apr 12 '22 at 19:31

inb4 slotLaneClassNames and slotLaneContent didn't work for me with greying out past TIMES. A fairly hacky but easy way to do this is to apply a box-shadow on the .fc-timegrid-now-indicator-line className:

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

In no way a perfect solution, but it has worked for me. Hope it helps someone out there as well.

React Full Calendar: Grey out dates cells in the past

2 Answers2