Fullcalendar v5 仅呈现一个事件提示

Posted 2023-05-08

【中文标题】Fullcalendar v5 仅呈现一个事件提示

【英文标题】：Fullcalendar v5 only renders one event tip

【发布时间】：2021-12-15 19:40:02

【问题描述】：

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

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 回滚到以前的完整日历版本，而不是 eventDidMount？ 感谢您的帮助

【问题讨论】：

这看起来很奇怪。您能否仅使用 JS 制作代码示例（用一些示例静态代码/数据替换 Django 标记）来重现问题，以便我们可以运行和测试它。这将使尝试和诊断问题变得更加容易。谢谢。

【参考方案1】：

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

然后它们在显示时重叠，有时您可以看到不同文本的部分文本，有时只是最近的文本，具体取决于它们是如何被tippy呈现的。

您只需要指定要附加该工具提示的特定事件元素。由于tippy will accept an element object（而不是选择器字符串）作为输入，这很简单，因为eventDidMount 回调参数直接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

【讨论】：

抱歉耽搁了，谢谢！有效！如果重构，请不要忘记cdn或喜欢您的文件