| Issue 435: | highlight sundays | |
| 3 people starred this issue and may be notified of changes. | Back to list |
It would be nice to be able to highlight Sundays, either by greying the cell background or by changing the text color of the column title and of the cells to red or something like that. Or giving the option to do both...
Apr 11, 2010
Yes, I'm looking for the same type of feature. I'd like to be able to highlight periods of time when external resources (conference rooms, equipment...) are available, or similarly "gray out" periods of time when they're not. Thanks for all the hard work on this great control!
Apr 14, 2010
If highlighting periods of time could be implemented, full calendar would easily be my number one choice calendar for future projects. Thanks for this great piece of software.
Apr 26, 2010
every sunday already has a .fc-sun class on it. just use your own css to style it.
Status:
Done
May 21, 2010
Is there any way to highlight periods of time? I have a similar requirement of that on Comment #2. I've searched a lot, but couldn't find anything. If there is not yet, could you give me a clue on how to implement it?
Mar 13, 2011
I haven't looked at this for a while, I just got back to it, and inspecting the elements that make up the calendar with Google Chrome I see that every week in a month has unique classes (.fc-week0,.fc-week1...) and every day in a month has unique classes (.fc-day0,.fc-day1).
Unfortunately, the month itself is not identified by a class (for example the parent table for the month could have "class='fc-month1'" when viewing January, "class='fc-month2'" when viewing February, etc.).
Another problem is that the classes for the days of the month don't correspond to the actual day number, but .fc-day0 is applied to the first box (or cell), which often are the trailing days of the previous month. Which complicates things when trying to uniquely identify the days of the month classwise.
I suppose it could still be possible using some jquery magic, for example selecting all divs with class .fc-day-number whose content corresponds to the range selection desired. For example, I want to highlight days from 5-10 in the current month:
$("div.fc-day-number").each(function(index){ if($(this).text()>=5 && $(this).text()<=10){ $(this).css({color:"Yellow"}); } });
But you would probably need to do a month-value check also in order to apply it to the month you want. If you are sure of the format that the month title will appear in, you could do a substring check. For example, you want to highlight days 4-6 in the month of March. Your months appear like this: "Mar '11", "Apr '11". You could do this:
str = $('.fc-header-title').text();
if(str.indexOf("Mar")!=-1){
$("div.fc-day-number").each(function(index){
if($(this).text()>=5 && $(this).text()<=10){ $(this).css({color:"Yellow"}); }
});
}
Here the only problem is, if the preceding months trailing days show up for example as 29,30,31 at the beginning of the current month, and you want to highlight days 15-31 of the current month, the above code will also highlight the three trailing days because their values are within the range...
Mar 13, 2011
continuing on my previous comment... You would probably want to do a year-value check too, so:
if(str.indexOf("Mar")!=-1 && str.indexOf("11")!=-1)
Mar 13, 2011
and continuing still... The above code will work whether the month appears as "Mar" or as "March", because the substring "Mar" appears in both. |
|
| ► Sign in to add a comment |
Hi, You could use your eventRender to do that. With something like: $('.fc-sun').addClass('highlight'); (and the proper css code), your sundays would be highlighted the way you want. (if you don't want to wait for a new feature) But I'm looking forward to an addition to fullCalendar where we would be able to highlight specific dates or periods of time. It's nearly the same. Regards, Renaud.