当最终用户单击“完整日历”上的事件时,我试图抛出工具提示。它根本不会抛出任何错误或任何信息,我似乎无法使其正常工作。我与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