0

Estou trabalhando com um calendário de eventos e gostaria que no calendário me mostrasse em cor diferente os dias que possuem eventos.

Uso o datepicker. http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

Estou procurando na documentação, mas não estou encontrando algo desse gênero que possa me ajudar. Terei que fazer uma pesquisa no banco via Ajax para pegar os dias que tem evento.

Terei que usar isso em alguma option ou method do calendário para comparar os dias e marcar a data que tenha evento, um highlight, por exemplo.

Meu código até o momento é esse, que funciona, só preciso implementar isso que estou falando.

JS

$('#ui-calendar').datepicker({
        closeText: 'Fechar',
        prevText: 'Anterior',
        nextText: 'Próximo',
        currentText: 'Hoje',
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho', 'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun', 'Jul','Ago','Set','Out','Nov','Dez'],
        dayNames: ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'],
        dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        todayHighlight: false,
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        onSelect: function(dateText){
            var box = $('#treinamentos');
            var loa = $('.load');
            var err = $('.error');
            $.ajax({
                type: "POST",
                dataType: "json",
                cache: false,
                url: urlBase + '/select-treinamentos',
                data: { dataSelect : dateText},
                beforeSend: function(){
                    box.html('');
                    err.hide();
                    loa.show();
                },
                success: function(data){
                    loa.hide();
                    if(data.length == 0)
                        err.show();
                    else{
                        box.html('');
                        $.each(data, function(index, value){
                            box.append('<tr><td><span class="titulo">'+ value.titulo +'</span><span class="subtitulo">'+ value.subtitulo 
'</span><a href="'+urlBase+'/informacoes/'+value.id+'">MAIS INFORMAÇÕES</a></td></tr>');
                        });
                    }
                }
            })
        }
    });

HTML

<div class="" id="ui-calendar"></div>

<div class="" id="ui-calendar"></div>
<div class="lista-treinamento">
    <span class="error">Não existem treinamentos para este dia.</span>
    <span class="load">Carregando Treinamentos...</span>
    <table cellpadding="0" cellspacing="0" id="treinamentos"></table>
</div>
6

1 Resposta 1

0

Consegui. Usando esse exemplo: http://jsfiddle.net/reigel/o0o7u4k3/

Fiz a pesquisa no banco, gravei as datas no array. E na função highlightDays o array é percorrido comparando as datas do calendário e aplicando a classe highlight quando a data é igual.

Depois na função datepicker, chamo a opção beforeShowDay: highlightDays, com a função.

JS

$.ajax({
    type: "POST",
    dataType: "json",
    url: urlBase + '/all-treinamentos',
    async: false,
    cache: false,
    data: {},
    success: function(data){
        $.each(data, function(index, value){
            datesTr.push(value.data);
        });
    }
});

function highlightDays(date){
    for (var i = 0; i < datesTr.length; i++){
        if (new Date(datesTr[i]).toString() == date.toString()){
            return [true, 'highlight'];
        }
    }
    return [true, ''];
}

$('#ui-calendar').datepicker({
    ...
    beforeShowDay: highlightDays
});

CSS

table{
    tr{
       td{
             a{
                background-color: #000;
                color: #FFF!important;
             }
         }
    }
}

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 .