How to highlight an event that is about to be deleted from FullCalendar

To help the user see what is changing in their calendar I would like to add a highlight effect to events that are about to deleted.

I have tried to use the: eventDestroy callback but this callback seems to be called for every rendered event on the calendar and not for the event that is about to be deleted.

currently I'm doing the following which works but is not very good code:

destroy.js.erb

var targetEvents = $("#calendar").fullCalendar("clientEvents", '<%= "user_event_#{@user_event.id}" %>');
targetEvents[0].deleted = true;
targetEvents[0].color = "white";
$("#calendar").fullCalendar("updateEvent", targetEvents[0]);

setTimeout(function(){
  $('#calendar').fullCalendar('removeEvents', '<%= "user_event_#{@user_event.id}" %>');
},3000); 

$('.modal').modal('hide');
$('.modal').on('hidden.bs.modal', function (e) {
  $('#remote-container').empty();
});

My css:

  @keyframes yellowfade {
    from { 
      color: black;
      background: yellow;      
      }
    to   { 
      color: transparent;
      background: transparent; 
      }
  }

  .deleted {
      color: white;
      animation-name: yellowfade;
      animation-duration: 2.5s;
  }

full_calendar.js

var initialize_calendar;
initialize_calendar = function() {
  $('#calendar').each(function(){
    var calendar = $(this);
    calendar.fullCalendar({
      header: {
        left: 'prev, next today',
        center: 'title',
        right: 'month, agendaWeek, agendaDay'
      },
      selectable: true,
      selectHelper: true,
      editable: true,
      eventLimit: true,
      contentHeight: 'auto',
      eventSources: ['/registration/user_events.json'],

      eventRender: function(event, eventElement) {
          if (event.recurring) {
              eventElement.find("div.fc-content").addClass('recurring');
          }
          if (event.allDay) {
            eventElement.find("div.fc-content").addClass('all_day');
          }
          if (event.deleted) {
            eventElement.find("div.fc-content").addClass('deleted');
          }
      },

      displayEventEnd: true,

      select: function(start, end) {
        start_date = moment(start).format("YYYY/MM/DD HH:mm");
        end_date = end.subtract(1, "days");
        end_date = moment(end_date).format("YYYY/MM/DD HH:mm");
        $.getScript('/registration/user_events/new?starting='+start_date+'&ending='+end_date, function() {});

        calendar.fullCalendar('unselect');
      },

      eventDrop: function(event, delta, revertFunc) {
        update(event);
      },

      eventResize: function(event, delta, revertFunc) {
        update(event);
      },

      eventClick: function(event, jsEvent, view) {
        $.getScript(event.edit_url, function() {});
      },

    });
  })
};

I would prefer to just be able to use a callback and jquery highlight effect but I can't figure out how.

Any ideas?

from How to highlight an event that is about to be deleted from FullCalendar