title: jQuery full calendar: set a different color to each event from front-end
body: <p>This is how I'm using the plugin:</p>
  <pre class="lang-js prettyprint-override"><code>jQuery( document ).ready( function() {
      jQuery('#booking-calendar').fullCalendar({
          header: {
              left: 'prev,next',
              center: 'title',
              right: 'month,basicWeek,basicDay'
          },
          editable: true,
          events: '&lt;?php echo get_template_directory_uri() ?&gt;/bookings-feed.php'
      });
  
      jQuery( '#apartment-selector' ).change( function() {
          apartment = jQuery( this ).val()
          jQuery('#booking-calendar').fullCalendar( 'removeEvents' )
          jQuery('#booking-calendar').fullCalendar( 'addEventSource',  {
              url: '&lt;?php echo get_template_directory_uri() ?&gt;/bookings-feed.php',
              type: 'POST',
              data: {
                  apartment : apartment
              }
          })
      })
  })
  </code></pre>
  <p>And this is how it looks:</p>
  <p><a href="https://i.stack.imgur.com/WbstF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WbstF.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>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,</p>
  <p>How can I color each event differently?</p>