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/

在全日历中的放置事件上添加背景色

1 个答案: