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.
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' }]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'); } },
Events list object in which you have properties like start, end, overlap,, rendering you also have a property called color in which you can specify color of the event.
Look at below demo code in which color property is used:
events: [ { start: '2017-11-24', end: '2017-11-28', overlap: false, rendering: 'background', color: '#257e4a' }, { start: '2017-11-06', end: '2017-11-08', overlap: false, rendering: 'background', color: '#ff9f89' }]