Как выделить событие, которое собирается удалить из FullCalendar

Question

Чтобы помочь пользователю увидеть, что меняется в его календаре, я хотел бы добавить эффект выделения для событий, которые собираются удалить.

Я пытался использовать обратный вызов: eventDestroy, но этот обратный вызов, кажется, вызывается для каждого отображаемого события в календаре, а не для события, которое должно быть удалено.

В настоящее время я делаю следующее, что работает, но не очень хороший код:

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();
});

Мой 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() {});
      },

    });
  })
};

Я бы предпочел использовать только функцию обратного вызова и подсветку jquery, но я не могу понять, как это сделать.

Есть идеи?