Добавить цвет фона на событие выпадения в fullcalendar

Question

Выберите тему из списка, затем добавьте в полный календарь цвет, определенный в атрибуте, который не отображается в календаре по умолчанию для отображения цветов.

Я хочу динамически изменять цвет фона. Но проблема в том, что если я жестко запрограммировал имя цвета в eventColor, чем его работу. Если я сохранил имя цвета в переменной, а затем присвоил eventColor, это не сработало.

Скриптовая ссылка

//Its not working
myColor = $(this).data("color"); //pick the color   
eventColor:myColor

//Its work  
eventColor:red

`

var myColor;

$('#calendar').fullCalendar({
header: {
  left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,  
dragRevertDuration: 0,
drop: function() {

  if ($('#drop-remove').is(':checked')) {

    $(this).remove();
  }
  myColor = $(this).data("color");

},
eventColor:"red",
eventDragStop: function(event, jsEvent, ui, view) {

  if (isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
    $('#calendar').fullCalendar('removeEvents', event._id);
    var el = $("<div class='' data-color='"+myColor+"' >").css({'background-color':+myColor}).appendTo('#external-events-listing').text(event.title);
    el.draggable({
      zIndex: 999,
      revert: true,
      revertDuration: 0
    });
    el.data('event', {
      title: event.title,
      id: event.id,
      stick: true
    });
  }
}
});

Answer 1

eventColor:myColor

- это опция настройки. Он используется один раз при загрузке календаря - вы присваиваете значение fullCalendar, он принимает и настраивает календарь с этими данными. После этого он больше не используется.

Если вы хотите дать внешнему событию некоторые пользовательские данные, которые будут использоваться при добавлении события в календарь, вы можете сделать это при инициализации пользовательских событий, добавив его в список свойств события, который элемент имеет:

$(this).data('event', {
  title: $.trim($(this).text()), // use the element's text as the event title
  stick: true, // maintain when user navigates (see docs on the renderEvent method)
  color: $(this).data("color") // <-- get the colour from the data-attribute of the event
});

Демо: http://jsfiddle.net/c4woLm35/