How am I able to show a button on the day cell on hovering?

[tonyabracadabra]

I am trying to use slotPropGetter but looks like that's for style only, am I able to add additional component on the slot?

What I want to achieve is to show an add button on the slot on hovering

[rikinshah23]

Were you able to figure this out?

[usersina]

No solution yet, but looks like these issues are somewhat related:

• https://github.com/jquense/react-big-calendar/issues/320
• https://github.com/jquense/react-big-calendar/issues/303
• https://github.com/jquense/react-big-calendar/issues/2288
• https://github.com/jquense/react-big-calendar/issues/470

[krumm1]

I did something like this:

added custom timeSlotWrapper

<Calendar components={{
  timeSlotWrapper: props => <CustomTimeSlot {...props} onClick={onAddEvent} />
}} />

CustomTimeSlot:

const CustomTimeSlot = ({ children, value, resource, onClick }) => {
  // displaying default time from left column
  if (resource === undefined) return children;
  // your jsx below
  return <div>
   <button onClick={() => onClick({date: value, resource})}>+</button>
  </div>
}

Added pointer-events: none to .rbc-events-container and pointer-events: auto to .rbc-event Don't forget to implement onAddEvent

Tested only in day and week view modes

[Chamesss]

<Calendar
   components={{
      month: {
         dateHeader: (props) => <DayCell props={props} /> //  this is how you control the header cell for each one in month view
      }
   }
/>

I hope this helps

[redouand]

did you have any luck, i am trying to do the same i can't figure out anything, the structure of the calendar is so bad where they have the content cell and bg cell seperated