jQuery FullCalendar programmatically change event rendering color

Question

I'm developing a multi-user version of the jQuery plugin fullcalendar. Each user has a unique color. You change user in a drop-down. So, I can assign a color for the users existing events.

The problem is when you render a new event, the color assigned to the 'eventColor' property of fullCalendar on initialize is not changed.

Let's say user 1 has, for example blue events. I initialize the fullCalendar with 'eventColor' blue. When and I change to user 2 who has yellow events, the rendered event still shows a blue event. I would like the event to be yellow from the moment I start dragging until i release the event.

I tried changing the event rendering color with $('.calendar').fullCalendar('option', 'eventColor', 'NEW_COLOR_HERE'); but that doesn't work.

Anyone found themselves in the same situation and came up with the solution? :)

Answer 1

If you change the global color, try rerenderEvents.

But looks like you may want to just set the event color property of one event (say, from eventClick), then call updateEvent.

Does this help?

Answer 2

function option(name, value) {

        if (value === undefined) {
           return options[name];
        }
        if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') {
            options[name] = value;
            updateSize();
        }
       // So I added these lines to the plugin and voila, it works like charm!
       if(name == 'eventColor') {
           options[name] = value;
       }
}

Call it in your script by

$('.calendar').fullCalendar('option', 'eventColor', '#NEW_COLOR_HERE');

Answer 3

One way to programmatically change an event's color, first retrieve the event (based on its id) with clientEvents, change its color and finally re-render the event with updateEvent:

event = $('#full-calendar').fullCalendar('clientEvents', event_id)
event.color = 'red'
$('#full-calendar').fullCalendar('updateEvent', event)