Bishan Bishan - 4 months ago 136
jQuery Question

Change the day background color in FullCalendar

I'm using FullCalendar in my asp.net application. I need to change the day background color.

What i have tried so far :

dayRender: function (date, cell) {

var today = new Date();
var end = new Date();
end.setDate(today.getDate()+7);

if (date.getDate() === today.getDate()) {
cell.css("background-color", "red");
}

var start = new Date();
start.setDate(today.getDate()+1);


while(start <= end){

//alert(start + "\n" + tomorrow);
if(start.getDate() == date.getDate()){
cell.css("background-color", "yellow");
}

var newDate = start.setDate(start.getDate() + 1);
start = new Date(newDate);
}
}


This change background color of whole days. Demo

But my need is to change the background color of days, 7 days onward from current date.

Example

Today is 2013-July-29. I need to change the background color of below days.

2013-July-30
2013-July-31
2013-August-01
2013-August-02
2013-August-03
2013-August-04
2013-August-05


How can i do this ?

Answer

You can do it like this:

dayRender: function (date, cell) {

    var today = new Date();
    var end = new Date();
    end.setDate(today.getDate()+7);

    if (date.getDate() === today.getDate()) {
        cell.css("background-color", "red");
    }

    if(date > today && date <= end) {
        cell.css("background-color", "yellow");
    }

}   

http://jsfiddle.net/z8Jfx/7/

Comments