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?