Fullcalendar v5事件渲染正常但所有提示框内容重复问题求助

你遇到的提示框内容全部相同的问题，是tippy绑定逻辑错误导致的，和FullCalendar版本、Django版本都没有关联，完全不需要回退到旧版FullCalendar。

问题原因 #

在eventDidMount回调中，你使用全局选择器.fc-event-title-container选中了页面上所有日程的标题容器，每次有新日程渲染完成，就会把所有已存在的日程的提示框内容覆盖为当前新日程的描述，最终所有提示框都会显示最后一个渲染完成的日程的描述内容。

修复方案 #

只需要修改eventDidMount回调的逻辑，仅为当前正在渲染的单个日程绑定tippy即可，修改后的完整代码如下：

document.addEventListener('DOMContentLoaded',function(){
    var cUI= document.getElementById('calendar'); 
    var c= new FullCalendar.Calendar(cUI,{
        themeSystem: 'bootstrap',
        headerToolbar:{
            left:'prev,next today',
            center:'title',
            right:'',
        },
        events:[
            {% for v in vacation %}
                {
                    {% if v.id_cause.cause_name == 'Vacations' %}
                       backgroundColor : 'blue',
                       borderColor : 'blue',
                    {% else %}
                        backgroundColor : 'darkgreen',
                        borderColor : 'darkgreen',
                    {% endif %}
                    textColor : 'gray',
                    title:"{{ v.startT }} - {{ v.endT }}",
                    start: "{{ v.startD | date:'Y-m-d' }}",
                    end: "{{ v.endD | date:'Y-m-d' }}",
                    description:"{{v.id_cause.cause_name}} {{v.cause_text}}",
                },
            {% endfor %}                    
        ],
        eventDidMount: function(info) {
            // 仅选中当前日程元素内的标题容器，绑定对应描述的提示框
            const eventTitleEl = info.el.querySelector('.fc-event-title-container');
            if (eventTitleEl) {
                tippy(eventTitleEl, {
                    content: info.event.extendedProps.description,
                    placement: 'top',
                    interactive: true,
                });
            }
        },
    });
    c.render();
    c.setOption('locale','en');
});

修改后每个日程只会绑定对应自身描述的提示框，不会互相覆盖，功能即可正常运行。

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