2

Estou usando o fullcalendar para um sistema onde o usuário clica em um dia para marcar uma agenda. Preciso deixar o fundo do dia clicado com uma determinada cor e isso eu achei na documentação como fazer e é simples mesmo, o meu problema aqui é quando o usuário clica em um segundo dia, e com isso o primeiro dia clicado deveria "apagar" a cor de fundo e deixar somente o segundo dia.

Eu até fiz, mas imagino que não da melhor forma, se alguém souber de uma forma melhor para isso.

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

});  

Exemplo no jsfiddle

1 Resposta 1

4

A sua solução é correta. Eu acrescento outra que é preferível, por usar classes em vez de aplicar o CSS diretamente ao elemento.

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

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

e o CSS:

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

Exemplo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .