reactjsfullcalendartooltippopper.jsfullcalendar-4

React Fullcalendar v4 tooltip


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


Solution

  • 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"
                />
    
          }