CODEWITHSUNDEEP
reactjsreact-big-calendar
Thomas Davis
Thomas Davis

Reputation: 188

React Full Calendar: Grey out dates cells in the past

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>

Upvotes: 3

Views: 3822

Answers (2)

Victor C.
Victor C.

Reputation: 1

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.

Upvotes: 0

Thomas Davis
Thomas Davis

Reputation: 188

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

Upvotes: 2

Related Questions