FullCalendar - Highlight a particular day in week view

Question

I am newly working on FullCalendar. Following this thread I am able to go to a specific date when selected from a datepicker on my page.

I am displaying FullCalendar in week view. My problem here is, in week view I am not able to apply the fc-state-highlight class on the date I have gone to. Even though the week has my required date, it is never highlighted.

However, I am able to remove the same class from the current date by using

$('.fc-today').removeClass('fc-state-highlight');

I need to add the above class to my gone-to-date.

Any help would be greatly appreciated.

EDIT: I have posted the solution myself.

Answer 1

Ok Guys, I worked out a solution for my problem.

Following this documentation on the FullCalendar site, I used the callback method dayRender() to solve my problem.

The above method has two parameters- date and cell. The first one stores all the days of a week in basicWeek view. So, given my required date is stored in a variable reqDate, I did something like this:

$('#my-div').fullCalendar({
    year: reqDate.getFullYear(),
    month: reqDate.getMonth(),
    date: reqDate.getDate(),
    dayRender: function(daysOfWeek, cell)
    {
        if(reqDate.getDate()==daysOfWeek.getDate())
        {
            $(cell).addClass('fc-state-highlight');
        }
        else
        {
            $(cell).removeClass('fc-state-highlight');
        }
    }
});

That's it :)

Answer 2

You can create new event during onload and prev and next button.

The function should check for the current week like,

$( "table.fc-agenda-days" ).hasClass( "td.fc-today" )

or

if ($("table.fc-agenda-days").find("td.fc-today").length > 0){ 
    $("table.fc-agenda-days td.fc-widget-content").addClass('fc-state-highlight');
}

Hope, this helps.