добавить всплывающее окно при нажатии на событие в большом календаре реакции?

У меня возникают проблемы с добавлением всплывающего окна к событию при нажатии на него. всплывающее окно, кажется, появляется только в слоте события, а не поверх слота события. Кроме того, поскольку я создал настраиваемый компонент для событий и попытался реализовать всплывающее окно в настраиваемом компоненте, всплывающее окно появляется только всякий раз, когда я щелкаю имя события.

Вот код:

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


reactjs javascript react-bootstrap react-big-calendar
person Shreya Shankar    schedule 03.07.2017    source источник
comment
Я не уверен, что понимаю вашу проблему. Не могли бы вы подробнее остановиться на описании проблемы? Проблема в том, что всплывающая подсказка не отображается?   -  person Ricardo Costa    schedule 29.10.2019
comment
Подсказка @RicardoCosta не отображается. Демо здесь: stackblitz.com/edit/react-umtvgs   -  person Umbro    schedule 29.10.2019
comment
@Umbro, пожалуйста, ответьте на мой предложенный ответ   -  person Ricardo Costa    schedule 29.10.2019

Ответы (2)


arrow_upward
1
arrow_downward

Можете ли вы попробовать это:

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

проблема в том, что классы fadeIn и fadeOut не работают должным образом, поэтому непрозрачность никогда не меняется от 0 до 1.

это не идеальное решение, поскольку вы только переживаете по поводу проблемы, но должно направить вас в правильном направлении.

person Ricardo Costa    schedule 29.10.2019

arrow_upward
0
arrow_downward

Проблема вроде с переполнением календаря и позициями.

Я добавил следующий .less код

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

Пример:

Со всплывающим окном!

person Jean-Philippe Bergeron    schedule 11.09.2017