如何在fullcalendar中以不同的顏色更改事件背景顏色？

Question

我正在使用fullcalendar的最新版本，我查看了文檔如何更改背景顏色事件，但我不知道如何製作不同的事件。
我需要代碼示例事件紅色，藍色，綠色，如圖片。

我看到這個代碼，在文檔的網站，但我不能申請2種顏色：

$('#calendar').fullCalendar({ 
     editable: true,    events: [ 
      { 
       title: 'Teste1', 
       start: new Date(y, m, d, 10, 30), 
       allDay: false, 
       editable: false 
      }, 
      { 
       title: 'Teste2', 
       start: new Date(y, m, d, 11, 40), 
       allDay: false 
      }   ], eventColor: '#378006'  }); 

Answer 1

由於您使用的是最新版本（1.5），因此您可以設置backgroundColor屬性。

{ 
    title: 'Teste1', 
    start: new Date(y, m, d, 10, 30), 
    allDay: false, 
    editable: false, 
    backgroundColor: '#SomeColor' 
}, 
{ 
    title: 'Teste2', 
    start: new Date(y, m, d, 11, 40), 
    allDay: false, 
    backgroundColor: '#SomeOtherColor' 
} 

您還可以設置textColor財產，如果你需要改變這一點。

Answer 2

使用CSS和className屬性。

<style> 
.event { 
    //shared event css 
} 

.greenEvent { 
    background-color:#00FF00; 
} 

.redEvent { 
    background-color:#FF0000; 
} 
</style> 

<script> 
$('#calendar').fullCalendar({ 
     editable: true,    events: [ 
      { 
       title: 'Teste1', 
       start: new Date(y, m, d, 10, 30), 
       allDay: false, 
       editable: false, 
       className: ["event", "greenEvent"] 
      }, 
      { 
       title: 'Teste2', 
       start: new Date(y, m, d, 11, 40), 
       allDay: false, 
       className: ["event", "redEvent"] 
      }   ], eventColor: '#378006'  }); 
</script> 

Answer 3

我已經爲每個事件應用了這樣的顏色代碼，它適用於我。

$.each(data, function(i, v){  
    var event =[];  
    var col = "";   
          if(v.Status == 1)  
          { 
           col = "#00c0ef"; 
          } 
          else if(v.Status == 2){ 
           col = "#dd4b39"; 
          }  
          else if (v.Status === 3) 
          {  
           col = "#f39c12"; 
          }  
          else { 
           col = "#00a65a"; 
          }  
         event.push({ 
          title: v.AssignedName + "\n Installation Date: \n" + da,  
          start: da,  
          backgroundColor: col,  
           textColor:'black'  
         }) 
});