在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