Change the day background color in FullCalendar

Question

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 ?

Have you tried anything yourself? Have you searched for a solution? — putvande, Jul 29 '13 at 09:18
@putvande Yes.i tried with `dayRender` event in `FullCalendar`. still trying to achieve this since a few hours. — Bishan, Jul 29 '13 at 09:20
@AKA no. i'm using [FullCalendar](http://arshaw.com/fullcalendar/) — Bishan, Jul 29 '13 at 09:21

score 18 · Accepted Answer · answered Jul 29 '13 at 17:51

18

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/

answered Jul 29 '13 at 17:51

Regin Larsen

1,152
8
14

I have an another [qustion](http://stackoverflow.com/questions/17942632/change-the-days-background-color-in-fullcalendar) about changing the days background color in FullCalendar. i'm thankfull to you if you can help me with it. – Bishan Jul 30 '13 at 09:17
4

there is no function getDate() for date, it should be date.date() instead. – Milan Maharjan Feb 26 '15 at 08:09

score 1 · Answer 2 · answered Jul 15 '16 at 09:52

1

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");

                            }

                        }

answered Jul 15 '16 at 09:52

Kinle

21
1

2

Welcome to Stack Overflow! While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, as this reduces the readability of both the code and the explanations! – Blue Jul 15 '16 at 11:44
@flob if you use agendaWeek and agendaDay views this one also changes the bakcground for them. Thanks to this: ".fc-time-grid .fc-bg table tbody tr td:nth-child(" + idx + ")" selector. Thats why it deserves a plus from me. – Krzysztof Duszczyk Dec 28 '16 at 13:08

Change the day background color in FullCalendar

2 Answers2

Linked