0

在我的Angular web app我使用Angular UI Calendar和Fullcalendar来显示用户的事件。

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

截图 1 截图 1

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

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

截图 2 截图 2

这是我controller为事件添加突出显示的部分。

控制器

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

2 回答 2

2

Fullcalendar 2.4 悬停演示（非角度）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');
  });
}
于 2016-03-23T18:11:10.503 回答
0

我通过添加 _id custom 来修复它

于 2017-01-24T06:01:17.523 回答