FullCalendar 事件限制点击后

Question

我正在加载有关我的事件的工具提示；但是，工具提示似乎在 "eventLimit" 弹出框内不起作用。

我已尝试重新初始化点击事件的工具提示，但点击事件发生在之前，而我需要重新初始化工具提示之后.

是否有我可以加入的后续活动或其他活动？

// tried this but it doesn't work...
eventLimitClick: function () {
  $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true }); // re-init tooltips
  return "popover";
},

Codepen 示例： https://codepen.io/anon/pen/xWLKeK?editors=0110

完整代码（供参考）：

$(function() {

  $('#calendar').fullCalendar({
    defaultView: 'month',
    defaultDate: '2018-03-07',
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    eventRender: function (event, element) {
      element
        .attr('title', event.title)
        .attr('data-placement', 'bottom')
        .attr('data-toggle', 'tooltip');
    },
    eventLimit: 2, // allow "more" link when too many events
    eventAfterAllRender: function () {
      $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true });
    },
    // tried this but it doesn't work...
    eventLimitClick: function () {
      $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true }); // re-init tooltips
      return "popover";
    },
    events: [
      {
        title: 'All Day Event',
        start: '2018-03-01'
      },
      {
        title: 'Long Event',
        start: '2018-03-07',
        end: '2018-03-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2018-03-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2018-03-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2018-03-11',
        end: '2018-03-13'
      },
      {
        title: 'Meeting',
        start: '2018-03-12T10:30:00',
        end: '2018-03-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2018-03-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2018-03-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2018-03-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2018-03-28'
      }
    ]
  });

});

Answer 1

我的解决方案是观察 .fc-popovers 插入 .fc-view 和 re-init 那里的工具提示：

viewRender: function(view, element) {
  // add handler to watch items inserted into .fc-view to catch popovers and re-init tooltips
  $('.fc-view').on('DOMNodeInserted', function (e) {
    if ($(e.target).hasClass('fc-popover')) {
      $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true }); // re-init tooltips
    }
  });
},

Codepen 示例： https://codepen.io/anon/pen/MVvaLY?editors=0110

Answer 2

为什么要在eventRender中设置data-toggle属性

element.attr('data-toggle', 'tooltip')

然后在 eventAfterAllRender

中使用通用机制

$('[data-toggle="tooltip"]').tooltip(...)

而不是直接在 eventRender 中做

$(element).tooltip(...)

（实际上更多的是一个问题，因为我不习惯 bootstrap.js，这似乎是你正在使用的）。

FullCalendar 事件限制点击后

FullCalendar After eventLimitClick

javascript

fullcalendar

fullcalendar-3