Issue 1092: Full Calendar (V1.5.1) Initial render shows default colours
Status:  Duplicate
Merged:  issue 1131
Owner: ----
Closed:  Sep 2011
Reported by Paresh...@gmail.com, Aug 23, 2011
Hi
I'm trying to get events to render in different colours depending on an event value.

My event list is an array:
var zones = {

    zone5: {start: '#ff0000', stop: '#ffffff', limit: 90},

    zone4: {start: '#bbbb00', stop: '#ffffff', limit: 80},

    zone3: {start: '#00ff00', stop: '#ffffff', limit: 70},

    zone2: {start: '#0000ff', stop: '#ffffff', limit: 60},

    zone1: {start: '#707070', stop: '#ffffff', limit: 00}
};
var EventList = [
        {title: 'event1', start: '2011-08-01', value:'67'},

        {title: 'event2', start: '2011-08-05', value:'96'},

        {title: 'event3', start: '2011-08-09', value:'85'},

        {title: 'event4', start: '2011-08-14', value:'74'},

        {title: 'event5', start: '2011-08-22', value:'56'},

    ];


and my calendar is set up like this:
    $('#calendar').fullCalendar({

        theme: true,

        header: {left: 'prev', center: 'title', right: 'next'},

        firstDay: 1,

        events: EventList,

        eventRender: function(event, element)

        {

            for (var zone in zones) {

                var lim = zones[zone]['limit'];

                if (event.effort > lim) {

                    var col = zones[zone]['start'];

                    event.backgroundColor = col;

                    $(element).attr('background-image', 'static/tile1.png');

                    break;

                }

            }

        }

    })

The problem I'm experiencing is that the initial render of the month view shows all events in the default colour, but if I change month and then return, the events are coloured correctly.


Sep 29, 2011
Project Member #1 adamrs...@gmail.com
This way of setting event object's property in eventRender, and expecting it to use the new value, won't work. (internally, the event has already looked at the backgroundColor property, rendered the event, and won't use it again).

A more appropriate place to make this dynamic change to event.backgroundColor would be in a custom event function (instead of an events array).

or you could directly change the background-color in eventRender (through .css() ) and forgo using the event object's backgroundColor
Status: Done
Oct 2, 2011
Project Member #2 adamrs...@gmail.com
merging into an issue that seems applicable. see my comment 1...
Status: Duplicate
Mergedinto: 1131