Inherit CSS of Object in jQuery

I am using a library called FullCalendar , they have a functionality to drag elements from a panel to add them to the calendar, please look at this example .

According to the same example, this function inherits the title of the external card.

$('#external-events .fc-event').each(function() {
  $(this).data('event', {
    title: $.trim($(this).text()), // Hereda el título de la tarjeta externa
    stick: true
  });
  $(this).draggable({
    zIndex: 999,
    revert: true,
    revertDuration: 0
  });
});

Adapting the same solution for the company I applied different classes to each external element, differentiating names and colors, I have something like this:

The problem is that when you drag any object, it only succeeds in inheriting the name and not the class:

If I add the function:

$('#external-events .fc-event').each(function() {
      $(this).data('event', {
        title: $.trim($(this).text()), // Hereda el título de la tarjeta externa
        color: 'lc', //Tengo clases que heredan de .fc-event
        stick: true
      });
      $(this).draggable({
        zIndex: 999,
        revert: true,
        revertDuration: 0
      });
    });

Respect the color, but for everyone. Finally, just as you inherit the text from the card, I want you to inherit the className.