CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Aditya K
Aditya K

Reputation: 159

How to change background color of days before today in FullCalendar...?

I want to change the background color of Days in my FullCalendar

How can i do this..?

Upvotes: 0

Views: 8953

Answers (5)

KTU
KTU

Reputation: 445

Do it in css, as simple as 

.fc-past {
  background-color: #F5F5F6
}

Upvotes: 0

sulest
sulest

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

Kanishka Panamaldeniya
Kanishka Panamaldeniya

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

Peter-Paul van Gemerden
Peter-Paul van Gemerden

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

Alex
Alex

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

Related Questions