Fullcalendar does not display color when using eventRender

Question

When I configure fullCalendar and set the eventRender function callback, I want to set the color of the event depending on whether the LeadId is null or not. But this does not seem to work, although the documentation says so: http://arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-options

Can I change the color of an event based on 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 weird. Event has all my properties returned for an event outside the server. Element is just the DOM element for the event. When I drag / move an event to another place on the calendar, the event turns red, and if I check the event object, it now has a color matching red. So the question is, why is it not applied to 1st rendering, but is color applied on subsequent renderings (i.e., after moving)?

Answer 1

EDIT 2: Some new changes to the fc-event-skin class ... now this is just an fc event, so style should not be a problem. Please mark the author's note here fullcalendar fc-event class ...

EDIT 1: Perhaps this is not a mistake.

The best approach is to set className in the event object and add it to the elements found by the fc-event-skin class. However, your added class will appear later in css and the colors will not take precedence, so you should use! Important It also retains "fake" rounded corners ...

Spend this method on the calendar ...

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

This is in your own stylesheet ...

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

ORIGINAL RESPONSE:

I think this is a small mistake in the rendering code. The element parameter is a jQuery object, so you can change it based on user event data. If you set the style and text of the element, it will display the color that you set; however, it seems to me that other styles are removed from the element, such as rounded corners, and the formatting of time and text.

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

Answer 2

I think this is at least a mistake. The problem is that in renderEvents in fullcalendar.js , that the call to the EventRender function EventRender called after the setSkinCSS function. Thus, any color changes of an element will not be displayed until the next time it is displayed.

I doubt it is easy, but I think it could be a mistake. It seems to me that the RenderEvent should be executed very early, and, of course, before creating the HTML.

(My workaround is to try to set the colors of the elements well before calling the full calendar, that is, before using the FullCalendar EventRender callback to set the colors)

Answer 3

try using color instead of 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); 

great shape works!

Answer 4

EDIT # 2 of the accepted answer mentions that .fc-event-skin is no longer needed, but the code snippet is not updated.

Now you can say:

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

where in your stylesheet is there something 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.

Answer 5

this is the full code:

 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); }