Fullcalendar 向事件添加工具提示

Question

我在我的 php 站點中使用 fullcalendar。 我用 eventSources 加載事件，給它一個 url 重定向到我的 php controller，它生成 json 數據。 在呈現日歷之前，我希望每個事件都有一個工具提示。 為此 scope 我寫了一個 javascript function 添加了工具提示：

 function dailyTooltip(){
   $('.fc-day-grid-event, .fc-time-grid-event').each(function(){
      var content = $(this).data('content');
      $(this).attr('title',''); 
      $(this).tooltip({
       tooltipClass: 'event-tooltip',
       content: content,
      }); 
   });
 }

其中內容為 html 內容。 function 在日歷呈現之后運行。 呈現日歷后，工具提示不顯示。

為了解決這個問題，我嘗試將 function 添加到 datesRender 和 eventRender。 datesRender 似乎有效，但只有當我更改視圖時（例如，從 timeGrid 到 dayMonthGrid）。 eventRender 不起作用。

Answer 1

您可以將Tooltip.js與fullcalendar eventRender一起使用以顯示工具提示，

<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>

您可以使用官方文檔中建議的事件渲染功能

eventRender: function(info) {
        var tooltip = new Tooltip(info.el, {
          title: info.event.extendedProps.description,//you can give data for tooltip
          placement: 'top',
          trigger: 'hover',
          container: 'body'
        });
      },

參見docs 事件渲染工具提示Fullcalendar

Answer 2

在fullcalendar.js V5中，沒有eventRender。 所以我所做的是每次單擊日歷上的任何按鈕 header 我都會創建他們的工具提示

<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>


const calendarControlBtns = Array.from(
  document.querySelectorAll('.fc-header-toolbar button')
);
calendarControlBtns.forEach((singleControlBtn) => {
  singleControlBtn.addEventListener('click', handleNewInterval);
});
const handleNewInterval = (e) => {
  const allEvents = Array.from(document.querySelectorAll('.fc-timegrid-event'));
  allEvents.forEach((singleEvent) => {
    singleEvent.dataset.toggle = 'tooltip';
    const title = singleEvent.querySelector('.fc-event-title').innerHTML;
    singleEvent.dataset.title = title;
  });
  $('[data-toggle="tooltip"]').tooltip();
}

Answer 3

我知道這是一篇舊文章，但如果有人找到這篇文章。 FullCalendar v5 有一個 hover 的例子。 https://fullcalendar.io/docs/event-tooltip-demo

您也可以在代碼筆（右上角按鈕）中查看它

確保添加兩個 js 腳本。 https://unpkg.com/popper.js/dist/umd/popper.min.js https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js