Reputation: 159
I want to change the background color of Days in my FullCalendar
How can i do this..?
Upvotes: 0
Views: 8953
Reputation: 1026
OPTION 1 there is class in each cell
.fc-past
.fc-today
.fc-future
You can use them in your css and make some colors for past, today and future.
OPTION 2 You can loop for each day cell and do some check's Here is example with month view
$('.fc-day').each(function(){
if($(this).is('.fc-today')) return false;
$(this).addClass('fc-before-today');
})
CSS
.fc-before-today{background-color:red}
Upvotes: 2
Reputation: 17586
var d=new Date();
var dat=d.getDate();
$('tbody tr').find('.fc-day-number').each(function(){
if($(this).val() == dat)
{
$(this).parents('div').siblings().prevAll().css('background-color','red');
return false;
}
});
Upvotes: 0
Reputation: 7011
You could do something like this (a bit verbose, but you can shorten it as much as you like):
var today = $('.fc-today');
var classNames = today.attr('class');
var index = classNames.indexOf('fc-day') + 6;
var day;
if (index > 0) {
day = classNames.substr(index, 2);
for (day = day-1; day >= 0; day -= 1) {
$('.fc-day'+day).addClass('fc-before-today');
}
}
Have a look at it on JSFiddle: http://jsfiddle.net/s4nuQ/
Also, I'm sure you could use a regular expression selection filter with jQuery, but why bother? It's never going to be more than 42* elements, so performance isn't such an issue.
* Really! Six weeks, seven days a week: 6 × 7 = 42
. :-)
Upvotes: 1
Reputation: 9041
Each day has a class, so you could add the following to your style sheet:
.fc-sun{background-color:Red;}
.fc-mon{background-color:green;}
.fc-tue{background-color:blue;}
How can this be used to identify days before today?
You'll need to use some jQuery:
$('.fc-today').prevAll('td').css('backgroundColor','yellow');
$('.fc-today').parent().prevAll().find('td').css('backgroundColor','yellow');
Upvotes: 10