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

Question

This is how I'm using the plugin:

jQuery( document ).ready( function() {
    jQuery('#booking-calendar').fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        events: '<?php echo get_template_directory_uri() ?>/bookings-feed.php'
    });

    jQuery( '#apartment-selector' ).change( function() {
        apartment = jQuery( this ).val()
        jQuery('#booking-calendar').fullCalendar( 'removeEvents' )
        jQuery('#booking-calendar').fullCalendar( 'addEventSource',  {
            url: '<?php echo get_template_directory_uri() ?>/bookings-feed.php',
            type: 'POST',
            data: {
                apartment : apartment
            }
        })
    })
})

And this is how it looks:

As you can see it's a bit difficult to track when an event starts and ends, so I was thinking of changing the color of each event.

The problem here is that each event might be split in different weeks (like in the example) and each week has a different DOM event (which makes sense) and they don't have any related class,

How can I color each event differently?

Answer 1

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

Answer 2

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

Answer 3

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'
            }]