FullCalendar React工具提示

时间:2019-11-13 16:59:24

标签: reactjs fullcalendar tooltip fullcalendar-4

当最终用户单击“完整日历”上的事件时,我试图抛出工具提示。它根本不会抛出任何错误或任何信息,我似乎无法使其正常工作。我与fullcalendar的合作不多,我是否缺少一个插件来使它正常工作,或者我的代码中有错误?我试图模仿这个Demo

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import Popper from "react-popper";
import Tooltip from "tooltip.js";

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";

let totalEarning = 156.75;

class ChildPortal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      events: [
        { title: "Clean Bedroom", date: "2019-11-12" },
        {
          title: "Vaccume Room",
          date: "2019-11-13",
          color: "green",
          textColor: "white"
        },
        {
          title: "Vaccume Room along with dads room",
          date: "2019-11-13",
          color: "green",
          textColor: "white"
        }
      ]
    };
  }

  eventRender(info) {
    var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.title,
      placement: "top",
      trigger: "click",
      container: "body"
    });
  }

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-lg-12">
            <div className="text-center m-t-lg m-b-lg">
              <h1>
                Total Earnings:{" "}
                <span className="text-navy">${totalEarning}</span>
              </h1>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="ibox">
            <div className="ibox-content">
              <FullCalendar
                defaultView="dayGridMonth"
                plugins={[dayGridPlugin, interactionPlugin]}
                events={this.state.events}
                eventRender={this.eventRender}
                schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ChildPortal />, rootElement);

代码沙箱:Code Sandbox

0 个答案:

没有答案