突出显示扩展到多个 rows/columns 的全日历事件

Question

在我的 Angular web app 中，我使用 Angular UI Calendar combined with Fullcalendar 来显示用户的事件。

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

截图1

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

在 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 悬停演示（非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');
  });
}

Answer 2

我通过添加 _id 自定义修复了它

突出显示扩展到多个 rows/columns 的全日历事件

Highlight fullcalendar events that expands over multiple rows/columns

javascript

jquery

angularjs

fullcalendar

ui-calendar