Datepicker With Highlight Dates

Question

I am working with a calendar of events and I would like the calendar to show me in different color the days that have events.

Use the datepicker. http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

I’m looking through the documentation, but I’m not finding anything like this that can help me. I will have to do a search in the bank via Ajax to pick up the days that have event.

I’ll have to use that for some option or method of the calendar to compare the days and mark the date you have an event, a highlight, for example.

My code so far is this, it works, I just need to implement what I’m talking about.

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>

Answer 1

I got it. Using this example: http://jsfiddle.net/reigel/o0o7u4k3/

I searched the bank, recorded the dates on array. And in function highlightDays the array is traversed by comparing calendar dates and applying the class highlight when the date is equal.

Then in function datepicker, call the option beforeShowDay: highlightDays, with the function.

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;
             }
         }
    }
}