FullCalendar自定义视图如何通过eventDidMount替代a标签实现popover功能

1. 清理自定义视图的HTML拼接代码 #

删除a标签上所有与popover相关的内联属性，包括data-toggle、data-placement、data-html、data-trigger、title、data-content，仅保留必要的链接、类名、文本属性，修改后代码如下：

'<td class="'+ freeDay +'"><div class="med-day-semestre" >'
    +'<div class="med-day-semestre-dayNumber">'
    + '<a class="fc-daygrid-day-number">'+ nameDay + currentDay +'</a>'
    +'</div>'
    +'<div class="med-day-semestre-eventBlock">'
    + '<a href=" ' + seg.def.url + '" class="'+ seg.ui.classNames +
' fc-timeline-event fc-h-event fc-event fc-event-start fc-event-end event-teal-light-disabled event-block-display" >' + seg.def.title +
'</a>'
    +'</div>'
    +'</div></td>';

2. 微调eventDidMount配置（按需调整） #

你现有的eventDidMount配置已经可以满足需求，如果你自定义视图生成的事件根元素不是a标签，而是外层的td/div元素，可以修改选择器找到内部的事件a标签再绑定popover，调整后的代码如下：

var calendarEl = document.getElementById('calendar');

var displayMedexactCalendar = new FullCalendar.Calendar(calendarEl, {
// 其余代码保持不变
eventDidMount: function(info) {
    if(typeof(info.event.extendedProps.description) !=  "undefined" && info.event.extendedProps.description != "") {
        // 如果你确认info.el就是事件a标签，可直接用$(info.el).popover(...)
        $(info.el).find('a.fc-event').popover({
            title:info.event.title+"<small class='d-block'>"+info.event.extendedProps.subtitle+"</small>",
            content:info.event.extendedProps.description,
            html:true,
            placement:'top',
            container: "body",
            delay: { "show": 500, "hide": 100 },
            trigger:'hover',
            template:'<div class="popover fc-med-popover '+info.event.classNames[0]+'" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
        });
    }
},
// 其余代码保持不变
});

注意事项 #

• 确保项目已经正确引入Bootstrap的JS和CSS文件，jQuery的popover依赖Bootstrap相关组件
• 确认事件的extendedProps中subtitle、description字段正常赋值，否则会跳过popover初始化逻辑

内容的提问来源于stack exchange，提问作者ykhattab