在资源时间线中拖动事件时出现全日历工具提示错误



我正在使用JavaScript FullCalendar库来构建我的日历。现在更新我的代码以使用FullCalendar V4。在资源时间线视图中拖动事件时,工具提示无法按预期工作(拖动时显示重复的工具提示(。此问题仅发生在资源时间线视图中,而不发生在 dayGrid 视图中。我附上了两个代码笔代码。日网格视图工作正常,但资源日程表视图不能
https://codepen.io/nmwangxin/pen/WNeRQaX https://codepen.io/nmwangxin/pen/qBWROKz

eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: 'test',
placement: 'top',
trigger: 'hover',
container: 'body'
});
},

拖动事件时,它每次都会重新渲染,所以基本上你每次都会重新创建一个新的工具提示,从而创建多个实例,这些实例反过来又会失去对被破坏的元素的引用,因此它是奇怪的位置。 我建议挂接到"eventMouseEnter"和"eventMouseLeave"回调,并在那里创建和销毁单个工具提示对象。 下面是一个示例:

var tooltip = null;
eventMouseEnter: function(info) {
tooltip = new Tooltip(info.el, {
title: info.event.title,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
eventMouseLeave:  function(info) {
if (tooltip) {
tooltip.dispose();
}
}

https://codepen.io/alex-hazanov/pen/rNBjPyL

或者像这样使用引导程序的工具提示:

eventMouseEnter: function (info) {
$(info.el).tooltip({
title: info.event.title + '<br />' + info.event._instance.range.start,
html: true,
placement: 'top',
trigger: 'hover',
container: 'body',
});
}

这将删除应用于完整日历上的事件的工具提示类。

eventContent: function (event, element) 
{
$('.tooltip').remove();
},

最新更新