Fullcalendar V5 在移动 cursor 时显示时间工具提示

Question

While moving the cursor on the calendar I want to show the time. I tried to solve the problem with the viewRender but the 5th version of the full calendar doesn't support it anymore.

this what i tried to do:

 viewRender: function(view, element){
      $('#calendar').find('.fc-slats').find('[class="fc-widget-content"]').hover(
        function() {
          var tr = $(this).parent();
          var time = tr.find('td.fc-axis.fc-time.fc-widget-content').find("span").text();
          $(this).append('<td class="temp_cell" style="border: 0px; width:5px;">'+time+'</td>');
        },          
        function() {                        
          $(this).children('.temp_cell').remove();
        }
      );
    }

Answer 1

Use eventMouseEnter instead. You can use tippyJS for this:

import tippy from "tippy.js";
...

eventMouseEnter: function (info: any) {
          let tooltip = tippy(info.el, {
            content: time,
            placement: "top",
            interactive: true,
            arrow: true,
            theme: "material",
            appendTo: document.body,
            allowHTML: true,
            duration: [1, 1],
            animation: "scale-extreme",
          }});

https://atomiks.github.io/tippyjs/