在react-big-calendar中点击事件时添加popover？

Question

我在点击事件时添加一个弹出窗口时遇到问题。 popover似乎只出现在事件槽中，而不是在事件槽顶部。此外，由于我为事件创建了自定义组件并尝试在自定义组件中实现弹出窗口，因此只要我单击事件名称，弹出窗口就会显示。

以下是代码：

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

在日历中，道具components={{event:CustomEvent}}。任何帮助，将不胜感激;谢谢！

Answer 1

您能尝试一下吗？

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

问题是您的fadeIn和fadeOut类无法正常工作，因此不透明度永远不会从0变为1。

这不是完美的解决方案，因为您只是在为问题苦苦挣扎，但应该使您朝着正确的方向前进。

Answer 2

问题似乎与日历溢出和位置有关。

我添加了以下.less代码

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

实施例