0

我正在尝试在 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');
        });

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

4

1 回答 1

0

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

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

您只需要指定要附加该工具提示的特定事件元素。由于tippy 将接受元素对象（而不是选择器字符串）作为输入，这很简单，因为eventDidMount回调参数直接为您提供正确的元素对象。

这样做比使用选择器更有意义，因为 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

于 2021-11-02T13:25:30.117 回答