如何在React中的FullCalendar中添加弹出窗口或工具提示？

Question

我已经在应用程序中实现了完整的日历API。我正在使用React-Bootstrap，并想在事件悬停上显示弹出窗口或工具提示。我没有在完整日历中如何实现此功能。 https://fullcalendar.io/docs/event-tooltip-demo 使用JS在FullCalendar中呈现事件悬停的工具提示。到现在为止，我尝试过的。

<FullCalendar
          ref={calendarRef}
          plugins={[
            interactionPlugin,
            resourceTimeGridPlugin,
            dayGridPlugin,
            scrollGridPlugin,
          ]}
          schedulerLicenseKey="CC-Attribution-NonCommercial-NoDerivatives"
          headerToolbar={false}
          resources={filteredResources}
          events={appointments}
          initialView="resourceTimeGridDay"
          slotDuration={{ minute: "30" }}
          slotMinTime={{ hour: "08" }}
          slotMaxTime={{ hour: "21" }}
          slotLabelInterval={{ hour: "01" }}
          editable={false}
          selectable={true}
          dayMaxEvents={true}
          dateClick={handleDateClick}
          eventClick={handleEventClick}
          allDaySlot={false}
          dayMinWidth={150}
          height={"auto"}
          stickyFooterScrollbar={true}
          eventDidMount={(info) => {
            console.log(info);
            return (
              <OverlayTrigger
                key="top"
                placement="bottom"
                trigger="hover"
                overlay={
                  <Popover id="popover-basic">
                    <Popover.Header as="h3">{info.event.title}</Popover.Header>
                    <Popover.Body>
                      And here's some <strong>amazing</strong> content. It's
                      very engaging. right?
                    </Popover.Body>
                  </Popover>
                }
              >
                {document.getElementsByClassName("fc-event-main")[0]}
              </OverlayTrigger>
            );
          }}
        />

以下是创建日历的屏幕截图。

Answer 1

您可以将方法eventMouseenter用作prop在我的情况下，我只是显示了一个简单的警报，但是您可以实现您使用的工具提示库，请注意我已经使用了FullCalender版本6

  eventMouseEnter: function (mouseEnterInfo) {
    alert("hovered over " + mouseEnterInfo.event.title);
},