3

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.

Community
  • 1
  • 1
Lalit
  • 839
  • 2
  • 14
  • 26

2 Answers2

6

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 :)

Lalit
  • 839
  • 2
  • 14
  • 26
1

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.

sathish
  • 800
  • 1
  • 8
  • 19
  • Hi Sathish, I didn't quite understand your solution. Are you sure you understood my requirement? – Lalit Nov 05 '13 at 08:41
  • Sathish, I have edited my post to make my requirement more clear. Anyway, I tried including your code snippet but it didn't work. – Lalit Nov 05 '13 at 08:48
  • hi kumar, i had checked the fullcalendar week view from the link which u provided. By default, "fc-state-highlight" class gets applied to the current date [5/11] column, but not the whole week. I thought, you need to apply the highlighted style to whole week. can you explain, if i am wrong. – sathish Nov 05 '13 at 08:49
  • I understand now, it seems you need to highlight some specific date, which you are moving to... – sathish Nov 05 '13 at 08:51
  • Sathish, suppose I go to the date 25 Dec 2013. Then using gotoDate, I will display that particular week in my FullCalendar (I need to use week view). But the date (25 Dec) is not highlighted (fc-state-highlight). It has a white back ground. This is where I need some help. – Lalit Nov 05 '13 at 08:54
  • Sathish, I am using basicWeek. And I just posted an answer too :) – Lalit Nov 05 '13 at 09:45
  • Clean solution. :) +1 – sathish Nov 05 '13 at 10:47
  • Can we change color based in start and end time in agendaWeek. Any help id really appreciated. Thanks, – Saurav Dangol Jan 04 '16 at 07:56