DatePicker With Highlight Dates

Question

DatePicker With Highlight Dates

Navigation

#1 by (0 votes)

0

I'm working with an event calendar and would like the calendar to show me in different color the days that have events.

I use the datepicker . link

I'm looking through the documentation, but I'm not finding something like that that can help me. I'll have to search the bank via Ajax to pick up the days that have an event.

I'll have to use this in some option or method of the calendar to compare days and set the date that has event, a highlight , for example.

My code so far is the one that 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>

jquery ajax

asked by anonymous 10.12.2015 / 13:30

1 answer

div set in browser footer Disable one button at a time jquery

score 0 · Accepted Answer

I have. Using this example: link

I did the search in the database, I recorded the dates in array . And in the highlightDays function the array is traversed by comparing the calendar dates and applying the highlight class when the date is equal.

Then in the function datepicker , I 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;
             }
         }
    }
}