Calendario completo de jquery: establece un color diferente para cada evento desde el front-end
Así es como estoy usando el 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
}
})
})
})
Y así es como se ve:
Como pueden ver, es un poco difícil rastrear cuándo comienza y termina un evento, así que estaba pensando en cambiar el color de cada evento.
El problema aquí es que cada evento puede dividirse en semanas diferentes (como en el ejemplo) y cada semana tiene un evento DOM diferente (lo que tiene sentido) y no tienen ninguna clase relacionada,
¿Alguna idea de cómo puedo colorear de manera diferente cada evento?
¡Gracias!