Fullcalendar doesn't render color when using eventRender

Question

When I set-up fullCalendar and set eventRender function callback, I want to set the color of the event depending if LeadId is null or not. But this doesn't seem to work even though the documentation says so: http://arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-options

Is there any way to set the event color to change based on the data?

 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:

This is really strange. The event has all my properties returned for the event off the server. element is just the DOM element for the event. When I drag/move the event to somewhere else in the calendar, the event turns red, and if I inspect the event object it now has color set to Red. So the question is why isn't it applying on the 1st render, but on subsequent renders (i.e. after move) the colour gets applied?

Solution 1

EDIT 2: Some new changes to the fc-event-skin class... it's now only fc-event, so styling shouldn't be an issue. Please check author's note here fullcalendar fc-event class...

EDIT 1: Maybe not a bug exactly.

The best approach is to set the className in the event object and add it to the elements found by an 'fc-event-skin' class. However, your added class will come later in the css and the colors will not take precedence, so you have to use !important. This also preserves the "fake" rounded corners...

Wire this method up on the calendar...

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

This in your own style sheet...

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

ORIGINAL ANSWER:

I think this is a minor bug in the rendering code. The element parameter is an jQuery object, so you can modify that based on your custom event data. If you set the style and text of the element, it will render with the color you set; however, it appears to me that other styles are removed from the element such as the rounded corners and the formatting of the time and text.

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

Solution 2

I believe this is a bug, at least of sorts. The problem is that in renderEvents in fullcalendar.js that the EventRender callback is called after the function setSkinCSS. So any changes to an element's color will not be reflected until the next time it is rendered.

I doubt the fix is easy, but I do think this qualifies as a bug. It seems to me that the RenderEvent callback should be done very early, and certainly before the HTML is generated.

(My workaround is to try to set the element's colors well in advance of the fullcalendar calls - i.e. to not use FullCalendar's EventRender callback for setting colors)

Solution 3

try using color instead eventColor event.Color = "#B22222";

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

use this code

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

works great forme!!

Solution 4

EDIT #2 of the accepted answer does mention that .fc-event-skin is no longer necessary but the code snippet has not been updated.

You can now say:

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

where in your style sheet someplace you have:

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

And viola! If some of your events have SomeBool set to true they will have a black background and white text.

View more solutions