jQuery full calendar: set a different color to each event from front-end

To colorize each event differently there are a couple approaches you can take to tackle your problem.

1. Update the event feed '/bookings-feed.php' and add color(background and border), backgroundColor, textColor, or borderColor to the event object http://arshaw.com/fullcalendar/docs/event_data/Event_Object/.

    events: [{
        title  : 'event1',
        start  : '2010-01-01',
        color  : '#000'
    }]
   

2. Separate and update the event feeds to use eventSources. Which allows you to group events by color and text color. http://arshaw.com/fullcalendar/docs/event_data/events_array/.

 $('#calendar').fullCalendar({
    eventSources: [
        // your event source
        {
            events: [ // put the array in the `events` property
                {
                    title  : 'event1',
                    start  : '2010-01-01'
                },
                {
                    title  : 'event2',
                    start  : '2010-01-05',
                    end    : '2010-01-07'
                },
                {
                    title  : 'event3',
                    start  : '2010-01-09 12:30:00',
                }
            ],
            color: 'black',     // an option!
            textColor: 'yellow' // an option!
        }
        // any other event sources...
    ]
});

You could try using the eventAfterRender callback. Check documentation.

This way, you will get the 'whole' event, and manipulate its color, based on a random choice.

Just so you could get an idea, i work with this callback, but the color is changed based on the day of the event. The color changes if the event is scheduled, is happening, or had already happened.

eventAfterRender: function (event, element, view) {
        var dataHoje = new Date();
        if (event.start < dataHoje && event.end > dataHoje) {
            //event.color = "#FFB347"; //Em andamento
            element.css('background-color', '#FFB347');
        } else if (event.start < dataHoje && event.end < dataHoje) {
            //event.color = "#77DD77"; //Concluído OK
            element.css('background-color', '#77DD77');
        } else if (event.start > dataHoje && event.end > dataHoje) {
            //event.color = "#AEC6CF"; //Não iniciado
            element.css('background-color', '#AEC6CF');
        }
    },