FullCalendar v5 中的 popover 元素-解网

问：

在使用这个较新版本的 fullcalendar 之前，我使用了 element.popover，如下所示：

eventRender: function(event, element, view) {
 element.popover({
  title:    '<div class="popoverTitleCalendar">'+ event.title +'</div>',
  content:  '<div class="popoverInfoCalendar">' +
            '<p><strong>Responsável:</strong> ' + event.respons + '</p>' +
            '<p><strong>Contato:</strong> ' + event.contact + '</p>' +
            '<p><strong>Inicio:</strong> ' + event.start.format('YYYY-MM-DD HH:mm:ss') + '</p>' +
            '</div>',
            delay: { 
                show: "800", 
                hide: "50"
            },
            trigger: 'hover',
            placement: 'top',
            html: true,
            container: 'body
 })
},

此代码在 V3 版本中完美运行。现在我正在升级到 v5 版本，但在使用上述相同功能时遇到困难。

我将留下一个代码示例：

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('element');
  $(el).show();
  $("section > div").not(el).hide();
});

$(document).on('click', '.dad-visita', function(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
          initialViews = 'listWeek';
     }else{
          initialViews = 'listWeek';
     }  

     var calendarEl = document.getElementById('calendario');
     var today = moment().day();

     var calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'listWeek'
        },
        locale: "pt-br",

        buttonText:{
            today:    'Hoje',
            list:     'Lista'
        },

        navLinks: true,             
        firstDay: today,
        hiddenDays: [ 0 ],
        initialView: initialViews,
        editable: true,
        selectable: true, 
        unselectAuto:true,
        eventOverlap: false,
        eventColor: '#f16621', 
        slotDuration: '00:45',
        allDaySlot : false,
        eventStartEditable: false,
        eventDurationEditable:false,
        slotLabelInterval: "00:45",
        longPressDelay: 0,
        nowIndicator: "true", //indicator of current time
        slotMinTime: '10:30',
        slotMaxTime: '19:00',
        eventContent: function( arg ) {
            return { html: arg.event.title };
        },
        
        eventDidMount: function(info) {
            var tooltip = new Tooltip(info.el, {
                title: info.event.extendedProps.respons,
                content:  '<p><strong>Contacto:</strong> ' + info.event.extendedProps.contact + '</p>',
                placement: 'top',
                trigger: 'hover',
                allowHTML: true,
                container: 'body'
            });
           
        },
        
        events: [
        { id: '1', title: 'teste', respons: 'testeee', contact: '000000001', start: '2023-07-10T10:00:00', end: '2023-07-10T13:18:00' },
        { id: '2', title: 'teste1', respons: 'testeee1', contact: '000000002', start: '2023-07-11T10:00:00', end: '2023-07-11T13:18:00' },
        { id: '3', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-07-12T10:00:00', end: '2023-07-12T13:18:00' }
      ],
    });

    calendar.render();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>

<a href="s160" data-element="#minhaDiv160" class="btn-show dad-visita">
    <i class="metismenu-icon pe-7s-info"></i>
    Consultar Visitas
</a>

<section id="s160">
  <div style="display:none;" id="minhaDiv160">
    <div class="cal-wrapper">
      <div id='calendario'></div>
    </div>
  </div>
</section>

但是这样，当我将鼠标悬停在事件上时，它只显示变量，里面的内容不会在日历中返回。titlecontent

我该如何解决这个问题？

我也试过这种方式：

   eventDidMount: function(info) {
        var tooltip = new Tooltip(info.el, {
            title: info.event.extendedProps.title ,
            html: '<div class="ui top label grey attached"><strong>Responsável</strong> ' + info.event.extendedProps.respons + '</div><br><div class="ui top label grey attached"><strong>Contacto</strong> ' + info.event.extendedProps.contact + '</div><br>',
            placement: 'top',
            trigger: 'hover',
            allowHTML: true,
            container: 'body'
        });
        
    },

但它仍然不起作用。谁能帮忙解决这个问题？

JavaScript 工具提示 FullCalendar-5

答： 暂无答案

上一个：输入新事件时更新日历数据

下一个：我想在完整日历中有两个由 slotMinTime 和 slotMaxTime 定义的期间

FullCalendar v5 中的 popover 元素

popover element in fullcalendar v5

评论