Fullcalendar React component:
import FullCalendar from "@fullcalendar/react";
import timeGrid from "@fullcalendar/resource-timegrid";
import resourceDayGridPlugin from '@fullcalendar/resource-daygrid';
class FC extends React.Component {
calendarComponentRef = React.createRef();
constructor(props) {
super(props);
this.state = {
events:[{ "id": 1, "title": "event 1", "description":"some description"},......]
}
}
eventRender(info){
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
}
render() {
return <FullCalendar
events={this.state.getEvents}
defaultView="resourceTimeGridDay"
plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}
eventRender={this.eventRender}
schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
/>
}
}
Tooltip.js included in header
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script rc="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js">/script>
Exactly trying to this demo in react, but it is not working in react version.
But tooltip not working
Fullcalendar react example project sample project react fullcalendar
Tooltip using Tooltip.js
eventRender(info){
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
}
In component :
render() {
return <FullCalendar
events={this.state.getEvents}
defaultView="resourceTimeGridDay"
plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}
eventRender={this.eventRender}
schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
/>
}
OR
using react-tooltip
import ReactTooltip from 'react-tooltip'
and method to handle eventPosition
handleEventPositioned(info) {
info.el.setAttribute("data-tip","some text tip");
ReactTooltip.rebuild();
}
and
render() {
return <FullCalendar
events={this.state.getEvents}
defaultView="resourceTimeGridDay"
plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}
eventPositioned={this.handleEventPositioned}
schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
/>
}