Fullcalendar: Change the color for specific days

Question

I\'m stuck with a project I get at work. I need to change the background color of some days. It\'s a calendar where the user should see, which days are available and which n

Answer 1

When working with external libraries, you should try not to take advantage of anything that was generated by the library. Since in the next version, if they change the way the library works internally, the library will still be backward compatible but your code will stop working. So try to use the library API as much as possible instead of doing hacks.

Answering your question, one way to do it will be, add a new event to all the days that are not available. This can be done by creating event object and doing a renderEvent(.fullCalendar( 'renderEvent', event [, stick ] )). While creating an event object assign the background color as the color you want and set the color, text color, border color to the same as background if you dont want it to be visible.

Edit: Regin Larsen's answer seems better. I didn't notice that in the documentation.

Answer 2

Why not using the "data-date" attribute?

$("#calendar").fullCalendar(function() {

  viewRender: function() {
    $("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
},

....