Search code examples
javascriptreactjsreact-big-calendar

How to display text/button in react-big-calendar cell?

I was able to edit week view slot style via slotPropGetter prop, but can't find a solution how to pass text to slot when there is no event. Example on the picture.

Current table:

<BigCalendar
  selectable
  className="calendar"
  popup
  localizer={localizer}
  formats={formats}
  events={this.state.events}
  defaultView={BigCalendar.Views.WEEK}
  views={['week']}
  step={90}
  timeslots={1}
  min={new Date(2019, 0, 1, 8, 0)} // 8.00 AM
  max={new Date(2020, 0, 1, 22, 0)} // Max will be 6.00 PM!
  onSelectEvent={event => this.showModalHandler(event, false, true)}
  onSelectSlot={event => this.showModalHandler(event, true, false)}
  eventPropGetter={this.eventStyleHandler}
  slotPropGetter={this.slotStyleHandler}
  components={{
      event: this.CustomEvent,
      week: {
          header: CustomDateHeader,
      },
  }}

/>

Maybe with timeSlotWrapper? To somehow change content in timeSlopWrapperProps.children?

const timeSlotWrapper = timeSlotWrapperProps => {
    return timeSlotWrapperProps.children
}

Sandbox to play around: https://codesandbox.io/embed/react-big-calendar-example-s6lsl?fontsize=14&hidenavigation=1&theme=dark

React big calendar api documentation: http://jquense.github.io/react-big-calendar/examples/index.html#api

enter image description here

Solution

  • Solution was to create events for each cell and modify event style instead of trying to modify empty cell style.