i need to add class for specific booked and blocked days in fullcalendar, i need to highlight the booked and blocked days with different color. Try tried out with some code but not coming correctly
$("#calendar").fullCalendar({
header: {
left: 'title',
center: '',
right: 'prev,next'
},
selectable: true,
events:[
{
title: 'Booked',
start: '2017-03-11',
end: '2017-03-22'
},
{
title: 'Block',
start: '2017-03-28',
end: '2017-04-6'
}
]
});
Use eventRender function in your fullCalendar options:
eventRender: function(event, eventElement) {
if (event.title == "Booked") {
eventElement.css('background-color', 'green');
}
},
or add a class with jquery addClass
eventElement.addClass('yourClass');
you can also reference sub-elements if you need
eventRender: function(event, eventElement) {
if (event.title == "Booked") {
eventElement.find("a.fc-content").css('background-color', 'green');
}
},