Habilitando dias especÃficos no calendário do JQUERY UI
Neste post vou mostrar como se habilita somente dias específicos em um calendário JQUERY UI, o método é bem simples e permite também a colocar alguma ação quando um usuário clica em uma dia no calendário que esteja marcado. Primeiro começamos com o básico, adicionando os scripts na página, neste exemplo obviamente precisamos so JQUERY e o JQUERY UI.
Agora adicionamos um container na página que servira para mostrar o calendário na página, não há limite de calendários por página, mesmo assim não recomendo uma quantidade grande deles por problemas de performance.
Em seguida adicionamos o código do calendário o código em si não é complicado o que precisamos mesmo fazer é passar ao calendário as data que queremos que fiquem marcadas no calendário e se quiser uma ação para quando o usuário clicar neste dia.
$(document).ready(function() {
dateList = ["20100406","20100413","20100419","20100420","20100420","20100422"];
$("#calendario").datepicker({ //ADICIONAMOS A FUNÇÃO PELO ID DO CONTAINER
beforeShowDay: function(dateToShow){
return [($.inArray($.datepicker.formatDate('yymmdd', dateToShow),dateList) >= 0), ""]; //FORMATA A DATA A E PEGA OS DIAS A SEREM MOSTRADOS
},
onSelect: function(dateText, inst) {
if($.inArray(dateText,dateList)) //ADICIONA UMA AÇÃO AO DIA
{
//AÇÃO QUANDO O DIA FOI CLICADO, OPCIONAL
}
}
});
});
O Retorno que coloquei nos dias no formato que deverá ser retornado, isso ajuda a dar uma visão de qual retorno você pode utilizar num script PHP por exemplo.