Highlight fullcalendar events that expands over multiple rows/columns

问题

In my Angular web app I'm using Angular UI Calendar combined with Fullcalendar to show user's events.

In this when a user click on an event it gets highlighted, but this has a little downside to it as it is right now, because when an event expands over multiple rows (in month view) or multiple columns (in week view), it's not the hole event that get highlighted - Screenshot 1.

Screenshot 1

In the image we have 2. Event that goes from 19. March to 21. March, but as you can see the only part that gets highlighted are the 19. and 20. March.

In Screenshot 2 is how I really want it, so users don't get confused and maybe think that it's actually two events, instead of one event (which it would be in this case).

Screenshot 2

This is the part of my controller that adds the highlighting to the event.

Controller

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

回答1:

Fullcalendar 2.4 on hover demo (non-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');
  });
}

If you want it on event click: 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');
  });
}

回答2:

I fixed it by adding _id custom

来源：https://stackoverflow.com/questions/36128815/highlight-fullcalendar-events-that-expands-over-multiple-rows-columns

标签

javascript

jquery

angularjs

fullcalendar

ui-calendar