React Bootstrap Popover в FullCalendar React - PullRequest
Новая
       6

React Bootstrap Popover в FullCalendar React

0 голосов
/ 25 марта 2020

Я использую библиотеку FullCalendar в React с реагированием bootstrap. Я хочу показать popover, когда событие щелкнуло по FullCalendar. Вот моя функция, нажатая на событие, для отображения всплывающего окна. 

EventDetail = ({ event, el, view }) => {

    let divId = 'test_' + event.id;
    const content = (
        <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
            <div className="fc-content" id={divId}>
                <div className="fc-title">{event.t0}
                    <br /><span className="f300">{event._def.extendedProps.t1}</span>

                    <div className="f300 breakWrd" style={{ whiteSpace: "pre-wrap", wordBreak: 'break-word' }}>
                        {event._def.extendedProps.t3}
                    </div>
                </div>
            </div>
        </OverlayTrigger>

    )
    ReactDOM.render(content, el);
    return el;
};

Компонент 'popover', определенный как ниже, 

const popover = (
    <Popover id="popover-basic">
        <Popover.Title as="h3">Popover right</Popover.Title>
        <Popover.Content>
            And here's some <strong>amazing</strong> content. It's very engaging.
            right?
    </Popover.Content>
    </Popover>
);

Когда я щелкаю по событию, aria-описаныby = "popover-basi c "свойство генерируется в div как показано ниже. 

<div class="fc-content" id="test_1258045" aria-describedby="popover-basic">
  <div class="fc-title">Title1<br /><span class="f300">Time Show</span>
    <div class="f300 breakWrd" style="white-space: pre-wrap; word-break: break-word;">
      Event_Details
    </div>
  </div>
</div>

А также элемент popover генерируется в элементе body. 

<div role="tooltip" x-placement="bottom" class="fade show popover bs-popover-bottom" id="popover-basic"
  style="position: absolute; top: 0px; left: 0px; right: auto; bottom: auto; transform: translate3d(945.5px, 277.5px, 0px);"
>
  <div class="arrow" style="position: absolute; left: 0px; transform: translate3d(179.5px, 0px, 0px);" ></div>
  <h3 class="popover-header">Popover right</h3>
  <div class="popover-body">
    And here's some <strong>amazing</strong> content. It's very engaging. right?
  </div>
</div>

Но его не видно перед. Когда я делаю элемент проверки, он показывает, как показано на рисунке ниже. Всплывающее содержимое отображается на обратной стороне календаря. Как я могу отобразить это здесь? Что здесь пошло не так? Любая идея?

1 Ответ

1 голос
/ 31 марта 2020

Я также должен был использовать реагировать - bootstrap поповер с fullcalendar. Вот мой код 

eventRender={(info) => {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">{info.event.title}</Popover.Title>
      <Popover.Content>
        Lead Auditor: <br /> 

      </Popover.Content>
    </Popover>
  );

  let evtId = "event-" + info.event.id;
  const content = (
    <OverlayTrigger placement="bottom" overlay={popover}>
        <div className="fc-content" id={evtId}>
          <span className="fc-title">{info.event.title}</span>
        </div>
    </OverlayTrigger>
  );

  ReactDOM.render(content, info.el);
}}

enter image description here

...