Para marcar dias del calendario datepicker con colores personalizados y habilitar o deshabilitar la selección de dias lo haremos de la siguiente forma.
Primero creo dos colores, para ello dos clases en css.
.ui-highlight-green .ui-state-default{
background: green !important;
border-color: green !important;
color: white !important;
}
.ui-highlight-red .ui-state-default{
background: red !important;
border-color: red !important;
color: white !important;
}
Ahora creamos e inicializamos el calendario, en la parte superior del código hay dos arrays, los dias a marcar en verde y rojo. Podemos escojer como se ve en el ejemplo la opción con el calendario desplegado u oculto de inicio.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- si queremos que sea necesario hacer foco en un imput para desplegar el calendario --> <input type="text" id="datecalendar" /> <!-- Si por el contrario queremos que se vea el calendario por defecto --> <div id="datecalendar"></div>
var datesActivas = ['2014-04-05','2014-04-15','2014-04-25'];
var datesCompletas = ['2014-04-06','2014-04-19','2014-04-20'];
jQuery(function(){
jQuery('#datecalendar').datepicker({
ochangeMonth : true,
ochangeYear : true,
obeforeShowDay : function(date){
ovar y = date.getFullYear().toString();
ovar m = (date.getMonth() + 1).toString();
ovar d = date.getDate().toString();
oif(m.length == 1){ m = '0' + m; }
oif(d.length == 1){ d = '0' + d; }
ovar currDate = y+'-'+m+'-'+d;
oif(datesActivas.indexOf(currDate) >= 0){
oreturn [true, 'ui-highlight-green'];
o}if(datesCompletas.indexOf(currDate) >= 0){
oreturn [false, 'ui-highlight-red'];
o}else{
oreturn [false];
o}
o},
onumberOfMonths: 2,
oshowButtonPanel: true,
ofirstDay: 1,
odateFormat : 'yy-mm-dd',
oonSelect: function(dateText, inst) {
oalert(dateText);
o}
o});
})
