突出显示扩展多行/列的fullcalendar事件

Question

在我的Angular web app我使用Angular UI Calendar与Fullcalendar结合使用来显示用户的活动。

当这个事件的用户click被突出显示时，但它现在有一点缺点，因为当事件扩展到多行时（在month视图中） ）或多列（在week视图中），它不是突出显示的洞事件 - 屏幕截图1.

屏幕截图1

在图片中，我们有2. Event，从3月19日到3月21日，但正如您所看到的那样，唯一突出的部分是19和20. March。

在Screenshot 2中我是如何真正想要的，所以用户不会感到困惑，也许会认为它实际上是两个事件，而不是一个事件（在这种情况下就是这样）。

屏幕截图2

这是我controller的一部分，它为活动添加了突出显示。

控制器

$scope.alertOnEventClick = function(calEvent, jsEvent, view){
   $(".fc-state-highlight").removeClass("fc-state-highlight");
   angular.element(jsEvent.currentTarget).addClass("fc-state-highlight");
};

Answer 1

悬停演示时的Fullcalendar 2.4（非角度）https://jsfiddle.net/4kbLa4da/

<ISEDirectory>\bin\nt64\compxlib.exe -family all - language all -library all -simulator questa ....

如果您想在活动中点击：https://jsfiddle.net/4kbLa4da/2/

$('#calendar').fullCalendar({
  defaultDate: '2016-03-01',
  events: [{
    start: '2016-03-01',
    end: '2016-03-05',
    title: 'Event 1'
  }, {
    start: '2016-03-06',
    end: '2016-03-15',
    title: 'Event 2',
    id: 3
  }],
  eventRender: function(event, element, view) {
    // event._id gets auto-populated, either event.id or auto-generated value
    element.attr('data-id', event._id);
    toggleClass(event._id);
  },
  eventMouseover: function(event, jsEvent, view) {
    toggleClass(event._id);
  },
  eventMouseout: function(event, jsEvent, view) {
    toggleClass(event._id);
  }
});

function toggleClass(id) {
  /* Find all segments for the specific event and toggle a class */
  var $event = $('a.fc-event[data-id="' + id + '"]');
  $.each($event, function() {
    $(this).toggleClass('my-highlight');
  });
}

Answer 2

我通过添加_id自定义

来修复它