Question

I am using FullCalendar in one my projects and would like to plot recurring dates, once the user clicks on a date. When a date is selected, I would like to plot next date 10 days after. So if user clicks on Sept. 1, 2010:

Date#2: Sept. 11, 2010
Date#3: Sept. 21, 2010
Date#4: Oct. 02, 2010

The way I would like to mark the calculated dates is to change the td background color. I have figured out this logic but cannot seem to set the background dates color.

I am running a for loop to generate the next 8 date, once the initial date is selected. I can generate the dates and push to an array “dArr”, but don’t know how to set the backgrounds of these dates.

<script type="text/javascript">
var dArr= [];
$(document).ready(function()
{   
    var now = new Date();
    $('#calendar').fullCalendar
    ({
        dayClick: function(date, allDay, jsEvent, view) 
        {   
            if(dArr.length > 0)
            {
                for(var j=0; j < dArr.length; j++)
                {
                    dArr.splice(j);
                }
            }
            dArr.push(date.getDate());                      
            for(var i=0; i < 8; i++)
            {
                if(i == 0)
                {
                    date.setDate(date.getDate() + 1);
                    dArr.push(date.getDate());
                }
                else if(i == 4)
                {
                    date.setDate(date.getDate() + 5);
                    dArr.push(date.getDate());
                }
                else
                {
                    date.setDate(date.getDate() + 14);
                    dArr.push(date.getDate());
                }                   
            }   // FOR LOOP ENDS HERE
            alert(dArr);
        }
    });

});
</script>

I would highly appreciate all your help on this.

Answer 1

To change the background color for a given date (in agendaWeek view):

var day = date.getDay();
$("#calendar .fc-agenda-bg").find("td").eq(day - 1).addClass('my-class');

where my-class :

my-class {
backgound: ......;
}