FullCalendar - события eventMouseover и eventMouseout не работают в пользовательском представлении

1

Я разработал календарь с FullCalendar и я использую стандартное представление и настраиваемое представление, которое отображает мои события в стиле списка.

Все отображается правильно, но eventMouseover по умолчанию 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));
};
  • 0
    Добро пожаловать в ТАК. Пожалуйста, отредактируйте свой вопрос и добавьте код инициализации календаря.
  • 1
    Думаю, мне нужно как-то «связать» событие календаря с html-элементом, чтобы активировать mouse-.events для событий календаря ?!
Показать ещё 4 комментария
Теги:
javascript-events
fullcalendar
dom-events
custom-view

1 ответ

1

Хорошо, я нашел решение из стандартного способа обработки пользовательских событий.

Я организую события в собственном представлении самостоятельно и написал собственные обработчики мыши для настраиваемого представления.

Everey работает как положено, но как-то грустно, что документация не покрывает эти задачи.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню