Fullcalendar no da color cuando se usa eventRender

Question

Cuando configuro fullCalendar y establezco la devolución de llamada de la función eventRender, quiero establecer el color del evento dependiendo de si LeadId es nulo o no. Pero esto no parece funcionar aunque la documentación lo diga: http://arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-options

¿Hay alguna forma de configurar el color del evento para que cambie en función de los datos?

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";      
       } 
      }, 

ACTUALIZACIÓN:

Esto es realmente extraño. El evento tiene todas mis propiedades devueltas para el evento fuera del servidor. elemento es solo el elemento DOM para el evento. Cuando arrastro/muevo el evento a otro lugar en el calendario, el evento se vuelve rojo, y si inspecciono el objeto del evento ahora tiene el color configurado en Rojo. Entonces, la pregunta es por qué no se está aplicando en el 1er render, pero en renders subsecuentes (es decir, después del movimiento) se aplica el color?

Answer 1

EDIT 2: Algunos nuevos cambios a la clase fc-evento de la piel ... es ahora sólo fc-evento, por lo que el estilo no debería ser un problema. Compruebe la nota del autor aquí fullcalendar fc-event class ...

EDIT 1: Tal vez no es un error exactamente.

El mejor enfoque es establecer className en el objeto de evento y agregarlo a los elementos encontrados por una clase 'fc-event-skin'. Sin embargo, su clase agregada aparecerá más adelante en el CSS y los colores no tendrán prioridad, por lo que debe usar! Important. Esto también preserva las esquinas redondeadas "falsos" ...

Wire este método arriba en el calendario ...

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

esta en su propia hoja de estilo ...

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

ORIGINAL RESPUESTA:

Creo que esto es un error menor en el código de representación. El parámetro del elemento es un objeto jQuery, por lo que puede modificarlo en función de sus datos de eventos personalizados. Si configura el estilo y el texto del elemento, se representará con el color que configure; sin embargo, me parece que otros estilos se eliminan del elemento, como las esquinas redondeadas y el formato de la hora y el texto.

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

Answer 2

intente utilizar color en su lugar eventColor event.Color = "# B22222";

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

uso este código

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

funciona muy bien forme !!

Answer 3

este es el código completo:

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

Creo que esto es un error, al menos en cierto modo. El problema es que en renderEvents en fullcalendar.js que la devolución de llamada EventRender se llama después de la función setSkinCSS. Por lo tanto, cualquier cambio en el color de un elemento no se reflejará hasta la próxima vez que se represente.

Dudo que la solución sea fácil, pero creo que esto califica como un error. Me parece que la devolución de llamada RenderEvent debe hacerse muy temprano, y ciertamente antes de que se genere el HTML.

(Mi solución es tratar de establecer los colores del elemento con suficiente antelación a las llamadas fullcalendar - es decir, a no utilización de devolución de llamada EventRender de FullCalendar para los colores de ajuste)

Answer 5

editar # 2 de la respuesta aceptada menciona que .fc-event-skin ya no es necesario, pero el fragmento de código no se ha actualizado.

Ahora usted puede decir:

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

en algún lugar en su hoja de estilos que tienen:

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

y la viola! Si algunos de sus eventos tienen SomeBool establecido en verdadero, tendrán un fondo negro y texto blanco.