Fullcalendar v5 отображает только одну подсказку о событии

Я пытаюсь отобразить некоторые события в 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');
        });

Отрисовывает календарь и советы, однако повторяет один и тот же совет для всех событий, но цвета для разных названий причин отображаются по-разному, так что я не понимаю, в чем дело, он отображает все события с их данными правильно, но советы не работают. Кстати, я на django 3. Может быть, откатиться к предыдущей версии полного календаря с eventRender, вместо eventDidMount? Спасибо за помощь

Предоставляя селектор класса .fc-event-title-container tippy, вы прикрепляете каждую всплывающую подсказку ко всем событиям (потому что все они имеют этот класс). Таким образом, в итоге каждая всплывающая подсказка прикрепляется к каждому событию.

При отображении они перекрываются, и иногда вы можете видеть фрагменты текста для разных из них, а иногда только для самого последнего, в зависимости от того, как именно они отображаются в tippy.

Вам нужно указать только конкретный элемент события, к которому вы хотите прикрепить подсказку. Поскольку tippy будет принимать объект элемента (вместо строки селектора) в качестве входных данных, это просто, поскольку аргументы обратного вызова eventDidMount предоставляют вам правильный объект элемента напрямую.

Имеет смысл сделать это таким образом, а не использовать селектор, потому что элементы событий FullCalendar HTML не имеют индивидуальных уникальных идентификаторов в разметке.

Код: 

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

Работающая демонстрация: https://codepen.io/ADyson82/pen/yLoPjqX

Вернуться на верх