0

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 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 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");
};
Backer
  • 1,094
  • 1
  • 20
  • 33

2 Answers2

2

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');
  });
}
smcd
  • 3,135
  • 2
  • 16
  • 27
  • You sir are a genius, this is exactly what I was looking for, and it works perfectly. Thank you very much! – Backer Mar 29 '16 at 14:58
  • Good deal. As a heads up, the use of event._id is probably not best practice since it could change in fullcalendar's implementation in the future. The benefit is it allows it to work for events not given an explicit event.id – smcd Mar 29 '16 at 15:12
  • Since all my events have an id, I just changed event._id to event.id, but thanks for the heads up :) – Backer Mar 29 '16 at 15:15
0

I fixed it by adding _id custom

Nikita Pikovets
  • 24
  • 3