Fullcalendar v5 只呈现一个事件提示

Question

我正在尝试在 v5 全日历中呈现一些事件。这是我的代码：

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 %}                    
                ],
                {% comment %} eventDidMount: function(info) {
                    var tooltip = tippy('.fc-event-title-container',{
                        content: info.event.extendedProps.description,
                        placement: 'top',
                        interactive: true,
                    });
                }, {% endcomment %}
            });
            c.render();
            c.setOption('locale','en');
        });

---更新---

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:[
                    {backgroundColor : 'blue',
                    borderColor : 'blue',
                    textColor : 'gray',
                    title:"08:00-09:00",
                    start: "2021-10-13",
                    end: "2021-10-20",
                    description:"vacation- holy time"},
                    {backgroundColor : 'green',
                    borderColor : 'green',
                    textColor : 'gray',
                    title:"08:00-10:00",
                    start: "2021-10-15",
                    end: "2021-10-15",
                    description:"medical- future´s coming"},
                   
                ],
                eventDidMount: function(info) {
                    var tooltip = tippy('.fc-event-title-container',{
                        content: info.event.extendedProps.description,
                        placement: 'top',
                        interactive: true,
                    });
                },
            });
            c.render();
            c.setOption('locale','en');
        });

---更新--- 它呈现日历和提示，但是它对所有事件重复相同的提示，但不同 cause_names 的颜色显示不同，所以我不明白它正确地呈现所有事件及其数据但提示失败。我在 django 3 顺便说一句。也许使用 eventRender 回滚到以前的 fullcalendar 版本，而不是 eventDidMount？感谢帮助

Answer 1

通过为 tippy 提供 class 选择器 .fc-event-title-container，您可以将每个工具提示附加到所有事件（因为它们都有 class）。所以最后，每个工具提示都附加到每个事件。

然后它们在显示时重叠，有时您可以看到不同文本的一些文本，有时只是最近的文本，具体取决于 tippy 如何渲染它们。

您只需指定要将该工具提示附加到的特定事件元素。由于 tippy will accept an element object (instead of a selector string) as input, this is straightforward because the eventDidMount callback arguments provide you with the correct element object 直接。

这样做比使用选择器更有意义，因为 fullCalendar HTML 事件元素在标记中没有单独的唯一 ID。

代码：

eventDidMount: function (info) {
  var tooltip = tippy(info.el, {
    content: info.event.extendedProps.description,
    placement: "top",
    interactive: true
  });
}

工作演示：https://codepen.io/ADyson82/pen/yLoPjqX

Fullcalendar v5 只呈现一个事件提示

Fullcalendar v5 only renders one event tip

javascript

django

fullcalendar

fullcalendar-5

tippyjs