sedhuraghuraman sedhuraghuraman - 1 year ago 41
jQuery Question

how to add class in fullcalendar

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'
}
]
});

Answer Source

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');
    }
  },
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download