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...
   
   ]