在单击react-fullcalendar事件时,如何显示antd popover?

时间:2019-07-02 14:09:35

标签: css reactjs fullcalendar antd fullcalendar-4

我正在使用antd进行react-fullcalendar,因此我想在单击事件时显示弹出窗口。

为此,我编写了以下代码。

import React, { Component } from 'react'
import $ from 'jquery';
import FullCalendar from "@fullcalendar/react";
export default class ScheduleCalendar extends Component {
calendarComponentRef = React.createRef();
state = {
    eventsList: [
      { title: "Event", start: new Date() }
    ]
  };
render() {
    return (
        <div>
            <div class="hide" id="popoverContent"></div>
            <FullCalendar
                plugins={[dayGridPlugin, interactionPlugin]}
                ref={this.calendarComponentRef}
                events={this.state.eventsList}
                eventClick={function(calEvent) {
                    $(calEvent.jsEvent.target).popover({
                            title: "Hii",
                            content: function () {
                               $("#popoverContent").append(`<div</div>`);
                                return $("#popoverContent").html();
                            },
                            container: 'body'
                        }).popover('show');    
                }}
            />
        </div>
    )
}

}

0 个答案:

没有答案