FullCalendar FullCalendar - 如何从拖动的外部事件源维护类

Question

我正在使用fullCalendar和jquery。我已经开始使用“拖放外部事件到日历”演示。

每个外部“源”有一个额外的类，以便每个源具有不同的颜色;

<style> 
.team1 {background: #3366CC; color:#000;} 
.team2 {background: #CC6633; color:#000;} 
.team3 {background: #CCA833; color:#000;} 
.team4 {background: #CC997F; color:#000;} 
.team5 {background: #433521; color:#000;} 
</style> 
<div id='external-events'> 
    <h4>Teams</h4> 
    <div class='external-event team1'>Doug</div> 
    <div class='external-event team2'>Al</div> 
    <div class='external-event team3'>Rances</div> 
    <div class='external-event team4'>Dave</div> 
    <div class='external-event team5'>Jennifer</div> 
</div> 

我已经修改了删除回调，试图获得这种额外的类，然后将其添加到新复制的事件对象。

要在这里节省空间，仅下降

drop: function(date, allDay) { // this function is called when something is dropped 

      // retrieve the dropped element's stored Event Object 
      var originalEventObject = $(this).data('eventObject'); 

      // this checks to see the the object being dragged has a "teamx" class associated to it 
      var valueArray = ($(this).attr('class')).split(" "); 
/* here find team class */ 
     for(var i=0; i<valueArray.length; i++){ 
       if (String(valueArray[i]).substring(0,5) == 'team'){ 
       var thisClass = valueArray[i]; 
       } 
      } 
      // we need to copy it, so that multiple events don't have a reference to the same object 
      var copiedEventObject = $.extend({}, originalEventObject); 

      // assign it the date that was reported 
      copiedEventObject.start = date; 
      copiedEventObject.allDay = allDay; 
/* attempt to apply team class */ 
$(copiedEventObject).addClass(thisClass); 
      // render the event on the calendar 
      // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
      $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

     // is the "remove after drop" checkbox checked? 
      if ($('#drop-remove').is(':checked')) { 
       // if so, remove the element from the "Draggable Events" list 
       $(this).remove(); 
      } 

     }, 

问题是该类不适用的。如果我提醒（thisClass）它是正确的类名称，但新事件具有日历的“默认”样式，并且团队之间没有视觉差异。

任何建议，非常感谢。 兰斯

Answer 1

有几件事你的代码错误：

for(var i=0; i<valueArray.length; i++){ 
    if (String(valueArray[i]).substring(0,5) == 'team'){ 
    var thisClass = valueArray[i]; 
    } 
} 

1. 你重新声明每次thisClass你打的if语句。
2. 您正在做substring(0, 5)并将其与团队匹配。 '团队'只有4个字符。如果你想知道它是否与“团队”开始，然后做一个substring(0, 4)

试试这个：

var thisClass; 
for(var i=0; i<valueArray.length; i++){ 
    if (String(valueArray[i]).substring(0,4) == 'team'){ 
    thisClass = valueArray[i]; 
    } 
} 

而且FullCalendar支持对在eventObject一个可选的属性称为className。更改

$(copiedEventObject).addClass(thisClass); 

到

copiedEventObject.className = thisClass; 

的最后一件事来检查，在你的CSS文件中找到类fc-event-skin并删除color，background-color和border属性。 （或者修改你想要的CSS）。这个CSS类很可能会覆盖你的自定义样式。