javascript - 突出显示扩展到多行/列的全日历事件

Question

在我的 Angular web 应用 中，我正在使用 Angular UI Calendar与 Fullcalendar 结合显示用户的事件。

在这种情况下，当用户单击某个事件时，它会突出显示，但这有一点缺点，因为它现在是这样，因为当一个事件扩展到多行时(在月 View )或多列(周 View )，突出显示的不是洞事件 - 屏幕截图 1。

屏幕截图 1

在图像中我们有2。事件从 3 月 19 日到 3 月 21 日，但正如您所看到的，唯一突出显示的部分是 3 月 19 日和 3 月 20 日。

在Screenshot 2中是我真正想要的，这样用户就不会感到困惑，并且可能认为这实际上是两个事件，而不是一个事件(在本例中就是这样)。

屏幕截图2

这是我的 Controller 的一部分，用于向事件添加突出显示。

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 悬停演示(非 Angular )https://jsfiddle.net/4kbLa4da/

$('#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');
  });
}

如果您想在事件中使用它，请点击:https://jsfiddle.net/4kbLa4da/2/

eventClick: function (event, jsEvent, view) {
    toggleClass(event._id);
  }
 /* ... */
/* And change toggleClass to turn it off first */
function toggleClass(id) {
  /* Find all segments for the specific event and toggle a class */
  var $event = $('a.fc-event[data-id="' + id + '"]');
  $('a.my-highlight').each(function () {
    $(this).toggleClass('my-highlight');
  });
  $.each($event, function() {
    $(this).toggleClass('my-highlight');
  });
}