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類很可能會覆蓋你的自定義樣式。