javascript - FullCalendar - eventMouseover 和 eventMouseout 事件不适用于自定义 View

Question

我用 FullCalendar 开发了一个日历，我使用标准 View 和一个自定义 View ，以类似列表的方式显示我的事件。

一切都正确显示，但默认的 eventMouseover 和 eventMouseout-handler 不会为我的自定义 View 上的事件调用。

renderEvents-Function 有什么特殊要求吗？我在那里做的唯一一件事就是构建事件表 html。

还是我错过了一些选项？我还没有找到解决方案。

这是我的完整日历初始化:

$('#calendar').fullCalendar({
      validRange: {
        start: '2018-01-01',
        end: '2025-12-31'
      },
      navLinks: true,
      header : {
          left: 'month,custom,listYear, today',
          center: 'title',
          right: 'prev,next'
      },
    views: {
        month: {
            buttonText: monthTitle,
            duration: { month: 1 }
        },
        listYear: {
            buttonText: "LIST-YEAR",
            visibleRange: function(currentDate) {
                var myStart = (currentDate.get("year")-1) + "-12-31";
                var myEnd   = (currentDate.get("year")) + "-12-31";
                return {
                    start: myStart,
                    end: myEnd
                };
            },
            duration: { year: 1 }
        },
        custom: {
            buttonText: yearTitle,
            visibleRange: function(currentDate) {
                var myStart = (currentDate.get("year")-1) + "-12-31";
                var myEnd   = (currentDate.get("year")) + "-12-31";
                return {
                    start: myStart,
                    end: myEnd
                };
            },
            duration: { year: 1 }
        }
      },
      viewRender: function(view,element) {
        if(view.name=="month"){
          //month
          $('.fc-today-button').show();
        }else {
          //listYear
          $('.fc-today-button').hide();
        }
      },
      eventOrder: sortEvents,
      defaultView: defView,
      columnHeaderFormat: 'dddd',
      weekNumberTitle: kwTitle,
      weekNumbers: true,
      contentHeight: calHeight,
      aspectRatio: 2,
      locale: curLocale, 
      defaultDate: startDate,
      editable: true,
      eventLimit: false ,
      events:  './calAction.php?do=getEvents',
      eventMouseover: function(calEvent, jsEvent, view) {
          var objId = ".ev" + calEvent.id;
          if(calEvent.type == 0) {
              objId = ".hd" + calEvent.id;
          }
          if( !$(objId).hasClass("tooltipstered")) {
              var ttHtml = calEvent.tt;
                $(objId).tooltipster({
                   animation: 'fade',
                   delay: 200,
                   contentAsHTML: true,
                   content: ttHtml
                });
          }
          $(objId).tooltipster('open');
      },
      eventMouseout: function(calEvent, jsEvent, view) {
          var objId = ".ev" + calEvent.id;
          if(calEvent.type == 0) {
              objId = ".hd" + calEvent.id;
          }

          if($(objId).hasClass("tooltipstered")) {
              $(objId).tooltipster('close');
          }              
      },
      eventClick: function(calEvent, jsEvent, view) {
          jsEvent.stopPropagation();

          if(curActiveEventObj != null ) {
            curActiveEventObj.removeClass("evActive");
          }
          var editable = calEvent.editable;
          if( editable ) {
            $(this).addClass("evActive");
            curActiveEventObj = $(this);
            curActiveEvent = calEvent;
          }
          else {
              curActiveEventObj = null;
              curActiveEvent = null;
          }
      },
      dayClick: function(date, jsEvent, view, resourceObj) {
          if(curActiveEventObj != null ) {
              curActiveEventObj.removeClass("evActive");
              curActiveEventObj = null;
          }

          ignoreFirstClick = true;
          var dateObj = date.toDate();

          if( dateObj < new Date() ) {
              return;
          }
          $("#eTitle").val('');
          $("#eDesc").html('');
          $("#eStart").data('DateTimePicker').date(dateObj);
          $("#eEnd").data('DateTimePicker').date(dateObj);


          $("#inputDlg").fadeIn("fast", function() {
          });
      },
      eventDrop: function(event, delta, revertFunc) {
          var evId = event.id;
          var days = delta.days();
          curUpdateEventId  = evId;
          curUpdateRevertFunc = revertFunc;

          updateEventDate(event, evId, days);
      },
      eventResize: function(event, delta, revertFunc) {
          var evId = event.id;
          var days = delta.days();
          curUpdateEventId  = evId;
          curUpdateRevertFunc = revertFunc;

          updateEventSpan(event, evId, days);
      }          
    });

好吧，我想我在 fullcalendar.js 中找到了源代码，它似乎将事件的 html 元素绑定(bind)到鼠标悬停/移出处理程序。必须对如何实现进行更多研究......

var EventPointing = /** @class */ (function (_super) {
tslib_1.__extends(EventPointing, _super);
function EventPointing() {
    return _super !== null && _super.apply(this, arguments) || this;
}
/*
component must implement:
  - publiclyTrigger
*/
EventPointing.prototype.bindToEl = function (el) {
    var component = this.component;
    component.bindSegHandlerToEl(el, 'click', this.handleClick.bind(this));
    component.bindSegHandlerToEl(el, 'mouseenter', 
    this.handleMouseover.bind(this));
    component.bindSegHandlerToEl(el, 'mouseleave', 
this.handleMouseout.bind(this));
};

Answer 1

好的，我找到了处理用户事件的标准方式之外的解决方案。

我自己组织自定义 View 中的事件，并为自定义 View 编写自己的鼠标处理程序。

Everey 按预期工作，但令人遗憾的是文档没有掩盖这些任务..