在完整日历中放置事件时添加背景色

Question

从列表中选择主题，然后将在属性中定义的颜色放入完整日历中，而不显示在日历默认颜色显示中。

我想动态地改变背景颜色。但问题是，如果我在eventColor中硬编码颜色名称，而不是它的工作。如果我将颜色名称存储在变量中，然后分配给eventColor，它就不工作了。

Fiddle link

//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/