CODEWITHSUNDEEP
javascriptjqueryasp.netfullcalendar
Bishan
Bishan

Reputation: 15710

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 ?

Upvotes: 3

Views: 41523

Answers (3)

SaeX
SaeX

Reputation: 18691

From FullCalendar v5 onwards, dayRender is deprecated, per https://fullcalendar.io/docs/v5/upgrading-from-v4.

The following worked for me in v5 and above:

dayCellDidMount: ({ date, el }) => {
    const requested_date = new Date();
    if (date.getDate() === requested_date.getDate() && date.getMonth() === requested_date.getMonth()) {
        el.style.backgroundColor = 'red';
    }
},

Note that getDate() just gets the day number (1, 2, ...) so in order to avoid two colored cells I'm checking for the month number as well, with getMonth().

Upvotes: 0

Kinle
Kinle

Reputation: 21

dayRender : function(date, cell) {
                            var idx = null;
                            var today = new Date().toDateString();
                            var ddate = date.toDate().toDateString();

                            if (ddate == today) {
                                idx = cell.index() + 1;
                                cell.css("background-color", "azure");
                                $(
                                        ".fc-time-grid .fc-bg table tbody tr td:nth-child("
                                                + idx + ")").css(
                                        "background-color", "azure");

                            }

                        }

Upvotes: 1

Regin Larsen
Regin Larsen

Reputation: 1152

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/

Upvotes: 18

Related Questions