在fullcalendar中更改事件顏色

Question

我正在嘗試着色事件。它從API獲取顏色。我試圖做到這一點，但無論我如何實施它，我都無法實現它。

這是我的兩個嘗試，通過不同的方法使其工作。

1）

<script> 
     $(document).ready(function(){ 
      $("#calendar").fullCalendar({ 
       events: "/app/calendar/cal/", 
       eventClick: function(event) { 
        window.top.location = "http://127.0.0.1:8000/app/calendar/event/" + event.id; 

       }, 
       eventRender: function(event, element) { 
        $(element).tooltip({title: event.body}); 
        $('.fc-content').css("background-color", "red"); 
       } 
      }) 
     }) 
    </script> 

2）

<script> 
     $(document).ready(function(){ 
      $("#calendar").fullCalendar({ 
       events: "/calendars/cal/", 
       url: 'http://google.com/', 
       eventClick: function(event) { 
        window.top.location = "http://127.0.0.1:8000/calendars/event/" + event.id; 

       }, 
       backgroundColor: 'red', 
       eventRender: function(event, element) { 
         $(element).tooltip({title: event.body}); 
        } 
      }) 
     }) 
    </script> 

Answer 1

您可以使用full calendareventColor財產。

JSFiddle對於所有事件的相同顏色屬性。

詳情檢查：http://fullcalendar.io/docs/event_data/Event_Source_Object/

http://fullcalendar.io/docs/event_data/Event_Object/

<script> 
     $(document).ready(function(){ 
      $("#calendar").fullCalendar({ 
       events: "/app/calendar/cal/", 
       eventClick: function(event) { 
        window.top.location = "http://127.0.0.1:8000/app/calendar/event/" + event.id; 

       }, 
       eventColor: '#378006', 
       eventRender: function(event, element) { 
        $(element).tooltip({title: event.body}); 
       } 
      }) 
     }) 
    </script> 

用於設置各個顏色事件，在事件陣列的對象添加backgroundColor屬性。

JSFiddle個別顏色。

var events_array = [{ 
     title: 'Test1', 
     start: new Date(2015, 09, 14), 
     tip: 'Personal tip 1', 
     backgroundColor: 'red' 
    }, { 
     title: 'Test2', 
     start: new Date(2015, 09, 15), 
     tip: 'Personal tip 2', 
     backgroundColor: 'green' 
    }]; 

Answer 2

您可以指定eventColor： '#yourColor'，沒有必要做這件事渲染事件。

如果要更改單個事件的顏色：http://fullcalendar.io/docs/event_data/Event_Object/#color-options