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

Question

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

Answer 1

解决方案是为每个单元格创建事件并修改事件样式，而不是尝试修改空单元格样式。

Answer 2

  <-- use this style -->
    export const useStyles = makeStyles((theme) => ({
      dateCell: {
        borderRight: "0.5px solid #DDDDDD",
        flex: "1 1 0%",
        display: "flex",
        justifyContent: "flex-end",
        bottom: 0,
      },
      positon: {
        position: "absolute",
        bottom: 0,
        padding: "0px",
        zIndex: 9999999,
      },
    }));
    
    
     const eventWrapper = ({ value }) => {
        return (
          <div className={`${classes.dateCell}`}>
            <IconButton
              onClick={() => schedulePost(value)}
              className={classes.positon}
            >
              <AddCircleOutlineIcon fontSize="small" />
            </IconButton>
          </div>
        );
      };
    
     <Calendar
            localizer={localizer}
            events={state}
            startAccessor="start"
            endAccessor="end"
            defaultDate={new Date()}        
            components={{         
              dateCellWrapper: eventWrapper`enter code here`,
            }}
            eventPropGetter={customeEventPropogatter}
          />