Clear fullcalendar background

Question

I’m using the fullcalendar to a system where the user clicks on a day to mark an agenda. I need to leave the background of the day clicked with a certain color and this I found in the documentation how to do and it’s really simple, my problem here is when the user clicks on a second day, and with that the first day clicked should "erase" the background color and leave only the second day.

I did, but I imagine not in the best way, if anyone knows a better way to do it.

$(document).ready(function() {
    var opt = {
            dayClick : function(date, allDay, jsEvent, view) {

            // seta todo background-color como branco
            $('.fc-view-month > table > tbody > tr > td').css('background-color', '#fff');

            // seta o background-color do dia clicado como vermelho
            $(this).css('background-color', 'red');
        }
    };

    $('.calendar').fullCalendar(opt);

});  

Example in jsfiddle

Answer 1

Your solution is correct. I add another that is preferable, by using classes instead of applying CSS directly to the element.

// Remove todo background do calendário
$('.fc-view-month > table .selecionado').removeClass('selecionado');

// Adiciona a classe "selecionado" ao dia clicado
$(this).addClass('selecionado');

and the CSS:

.selecionado {
    background-color: #f55;
    transition: background-color 80ms linear; # Isto é só para suavizar o aparecer 
                                              # e desaparecer do fundo
}

Example