完整日历向事件添加工具提示

Question

我在我的php网站中使用fullcalendar。我使用 eventSources 加载事件，给它一个重定向到我的 php 控制器的 url，它会生成 json 数据。在呈现日历之前，我希望每个事件都有一个工具提示。在这个范围内，我写了一个 javascript 函数来添加工具提示：

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 内容。该函数在日历呈现后运行。 呈现日历后，工具提示不会显示。

为了解决这个问题，我尝试将函数添加到 dateRender 和 eventRender。 日期渲染似乎有效，但只有当我更改视图(例如从 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'
});
},

查看事件渲染工具提示完整日历演示

Answer 2

我知道这是一个旧帖子，但如果有人找到这篇文章。 FullCalendar v5 有一个悬停示例。 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

Answer 3

在 fullcalendar.js V5 中，没有 eventRender。所以我所做的是每次我单击日历标题上的任何按钮时，我都会创建他们的工具提示

<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();
}