Si encuentras algo que te causa duda puedes dejarlo en la sección de comentarios y haremos todo lo necesario de ayudarte rápidamente.
Solución:
Para colorear cada evento de manera diferente, hay un par de enfoques que puede tomar para abordar su problema.
-
Actualice el feed de eventos ‘/bookings-feed.php’ y agregue color (fondo y borde), backgroundColor, textColor o borderColor al objeto de evento http://arshaw.com/fullcalendar/docs/event_data/Event_Object/.
events: [ title : 'event1', start : '2010-01-01', color : '#000' ] -
Separe y actualice las fuentes de eventos para usar eventSources. Lo que le permite agrupar eventos por color y color de texto. 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...
]
);Podría intentar usar la devolución de llamada eventAfterRender. Consultar documentación.
De esta manera, obtendrá el evento ‘completo’ y manipulará su color, en función de una elección aleatoria.
Solo para que pueda tener una idea, trabajo con esta devolución de llamada, pero el color cambia según el día del evento. El color cambia si el evento está programado, está sucediendo o ya sucedió.
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');
,
Objeto de lista de eventos en el que tiene propiedades como inicio, final, superposición, representación, también tiene una propiedad llamada color en la que puede especificar el color del evento.
Mire a continuación el código de demostración en el que se utiliza la propiedad de color:
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'
]