Yaso Yaso - 7 months ago 832
Javascript Question

Fullcalendar: Change the color for specific days

Im stuck with a project I get at work. I need to change the background color of some days. Its a calendar where the user should see, which days are available and which not. I found out that there is an attribute called "data-date", but i didnt found a possibility to use it.

So now comes the question: Is there any way to manipulate the background of specific days?

I think there must be a way, cause the cell which shows the current date has another color too.

Im sorry for my bad english, hope u understand what I mean xD

Thx a lot for every help u can give me! I worked with jQuery and JS only a few hours till now.

Answer

For the views month, basicWeek and basicDay you can change the rendering of the days by providing a dayRender function. E.g.:

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        cell.css("background-color", "red");
    }
});

The documentation for dayRender is available here: http://arshaw.com/fullcalendar/docs/display/dayRender/

And here's a working example on jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/