Clear fullcalendar background

Question

Clear fullcalendar background

I'm using fullcalendar for a system where the user clicks on a day to schedule an appointment. 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 is simple even, 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 even did, but I imagine not in the best way, if anyone knows in a better way for that.

$(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

2

javascript jquery fullcalendar

Author: Marcelo Diniz, 2014-05-02

Source

1 answers

score 4 · Accepted Answer

Your solution is correct. I add another one that is preferable, for 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 CSS:

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