Question

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

一切正常显示，但自定义视图上的事件未调用默认的eventMouseover和eventMouseout-handler。

在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元素绑定到mouseover / out处理程序上。必须对如何实现进行更多研究...

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

好吧，我找到了一种处理用户事件的标准方法。

我自己在定制视图中组织事件，并为定制视图编写了自己的鼠标处理程序。

Everey可以按预期工作，但是令人遗憾的是文档没有涵盖此任务..

FullCalendar-eventMouseover和eventMouseout事件不适用于自定义视图

1 个答案: