Fullcalendar không hiển thị màu khi sử dụng eventRender

Question

Khi tôi thiết lập fullCalendar và đặt chức năng gọi lại eventRender, tôi muốn đặt màu của sự kiện tùy thuộc vào nếu LeadId là null hay không. Nhưng điều này dường như không hoạt động mặc dù tài liệu nói như vậy: http://arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-options

Có cách nào để đặt màu sự kiện thay đổi dựa trên dữ liệu không?

calendar = $('#dayview').fullCalendar({ 
      .... 
      timeFormat: 'HH:mm', 
      columnFormat: { 
       agendaDay: 'dddd dd/MM/yyyy' 
      }, 
      eventClick: function (calEvent, jsEvent, view) { 
       var leadUrl = "/Leads/" + calEvent.LeadId; 
       window.location = leadUrl; 
      }, 
      eventRender: function (event, element) { 
       if (event.LeadId != null) { 
        event.eventColor = "#B22222"; 
        event.eventBackColor = "#B22222";      
       } 
      }, 

UPDATE:

Điều này thực sự kỳ lạ. Sự kiện có tất cả các thuộc tính của tôi được trả về cho sự kiện tắt máy chủ. phần tử chỉ là phần tử DOM cho sự kiện. Khi tôi kéo/di chuyển sự kiện đến một nơi khác trong lịch, sự kiện sẽ chuyển sang màu đỏ và nếu tôi kiểm tra đối tượng sự kiện, bây giờ nó có màu được đặt thành Đỏ. Vì vậy, câu hỏi là tại sao không phải là nó áp dụng trên render đầu tiên, nhưng trên renders tiếp theo (tức là sau khi di chuyển) màu sắc được áp dụng?

Answer 1

EDIT 2: Một số thay đổi mới đến lớp fc-event-da ... nó bây giờ chỉ fc-sự kiện, vì vậy phong cách không phải là một vấn đề. Vui lòng kiểm tra ghi chú của tác giả tại đây fullcalendar fc-event class ...

EDIT 1: Có thể không phải là lỗi chính xác.

Cách tiếp cận tốt nhất là đặt className trong đối tượng sự kiện và thêm nó vào các phần tử được tìm thấy bởi lớp 'fc-event-skin'. Tuy nhiên, lớp được thêm vào của bạn sẽ đến sau trong css và màu sắc sẽ không được ưu tiên, vì vậy bạn phải sử dụng! Điều này cũng giữ gìn "giả" góc tròn ...

Wire phương pháp này lên trên lịch ...

eventRender: 
function (event, element, view) { 
    element.find('.fc-event-skin').addClass(event.className.join(' ')); 
} 

này trong bảng phong cách riêng của bạn ...

.redGray 
{ 
    border-color: DarkGray !important; 
    background-color: LightGray !important; 
    color: red !important; 
} 

ORIGINAL ĐÁP:

Tôi nghĩ đây là lỗi nhỏ trong mã hiển thị. Tham số phần tử là một đối tượng jQuery, vì vậy bạn có thể sửa đổi nó dựa trên dữ liệu sự kiện tùy chỉnh của bạn. Nếu bạn đặt kiểu và văn bản của phần tử, nó sẽ hiển thị với màu bạn đã đặt; tuy nhiên, nó xuất hiện với tôi rằng các kiểu khác được loại bỏ khỏi phần tử như các góc tròn và định dạng của thời gian và văn bản.

eventRender: 
function (event, element) { 
    if (event.LeadId != null) { 
     element.css('color', 'blue'); 
     element.css('background-color', 'yellow'); 
     element.text(element.text); 
    } 

Answer 2

thử sử dụng màu thay vì eventColor event.Color = "# B22222";

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

sử dụng mã

$('#calendar').fullCalendar('renderEvent', { 
    id : 99, 
    title : 'Some event', 
    start : y + '-' + m + '-28', 
    color : 'red' 
}, true); 

này hoạt động forme tuyệt vời !!

Answer 3

này là mã đầy đủ:

function addTestEvents() { 

     var d = new Date(); 
     var y = d.getFullYear(); 
     var m = d.getMonth() + 1; 
     if (m < 10) 
     m = '0' + m; 

     $('#calendar').fullCalendar('renderEvent', { 
     id : 99, 
     title : 'Some event', 
     start : y + '-' + m + '-28', 
     color : 'red' 
     }, true); 
} 

Answer 4

Tôi tin rằng đây là lỗi, ít nhất là các loại. Vấn đề là trong renderEvents trong fullcalendar.js rằng cuộc gọi lại EventRender được gọi là sau chức năng setSkinCSS. Vì vậy, bất kỳ thay đổi nào đối với màu của phần tử sẽ không được phản ánh cho đến khi lần xuất hiện tiếp theo.

Tôi nghi ngờ việc khắc phục rất dễ dàng, nhưng tôi cho rằng điều này đủ điều kiện làm lỗi. Dường như với tôi rằng cuộc gọi lại RenderEvent nên được thực hiện rất sớm và chắc chắn trước khi HTML được tạo.

(workaround tôi đang cố gắng để thiết lập màu sắc của phần tử tốt trước các cuộc gọi fullcalendar - IE để không sử dụng EventRender callback FullCalendar cho màu sắc thiết lập)

Answer 5

EDIT # 2 của câu trả lời chấp nhận không đề cập đến đó .fc-event-skin không còn cần thiết nhưng đoạn mã chưa được cập nhật.

Bây giờ bạn có thể nói:

$('#calendar').fullCalendar({ 
    eventRender: function(event, element) { 
     if (event.SomeBool) { 
      element.addClass('black-background'); 
     } 
    } 
}); 

nơi trong style sheet một nơi nào đó của bạn, bạn có:

.black-background { 
    color: white !important; 
    background-color: black !important; 
    border-color: black; 
} 

Và viola! Nếu một số sự kiện của bạn có SomeBool được đặt thành true, chúng sẽ có nền đen và văn bản màu trắng.