在react-big-calendar中单击事件时添加弹出窗口? [英] add popover when event is clicked in react-big-calendar?

问题描述

点击事件时，我无法在事件中添加弹出窗口.弹出窗口似乎仅显示在事件槽中，而不显示在事件槽的顶部.另外，由于我为事件创建了一个自定义组件，并试图在该自定义组件中实现弹出窗口，因此仅当我单击事件名称时才会显示弹出窗口.

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.

这是代码:

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}}.

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

推荐答案

您可以尝试以下方法吗:

Can you try this:

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

问题是您的fadeIn和fadeOut类无法正常工作，因此不透明度永远不会从0变为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.

这篇关于在react-big-calendar中单击事件时添加弹出窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！