add popover when event is clicked in react-big-calendar?

Question

I'm having trouble adding a popover to an event when it is clicked. the popover seems to show up only in the event slot, not on top of the event slot. additionally, since i created a custom component for the events and tried to implement the popover in the custom component, the popover only shows up whenever i click the name of the event.

Here is the code:

class CustomEvent extends React.Component {
    constructor(props){
        super(props)
    }


    render(){
      console.log(this.props);

      let popoverClickRootClose = (
        <Popover id="popover-trigger-click-root-close" style={{zIndex:10000}}>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover>
      );

        return (
          <div>
            <OverlayTrigger id="help" trigger="click" rootClose container={this} placement="bottom" overlay={popoverClickRootClose}>
              <div>{this.props.event.title}</div>
            </OverlayTrigger>

          </div>
        );
    }
}

where in calendar, the prop components={{event:CustomEvent}}.

Answer 1

Can you try this:

<Popover id="popover-trigger-click-root-close" style={{opacity:1}}>

the problem is your fadeIn and fadeOut classes are not working properly so opacity never goes from 0 to 1.

this is not the perfect solution as you are only paiting over the problem but should get you in the right direction.

Answer 2

The problem seem to be with the calendar overflow and positions.

I added the following .less code

.rbc-month-row, .rbc-event-content {
  overflow: visible;
}
.rbc-row-segment {
  position: relative;
}

Example: