Hola quike88,
Gracias por contestar.
El ejemplo que me envías fue lo primero que intenté en su momento, pero no me dio resultado.
He hecho lo siguiente para que funcionara:
- Usar beforeShowDay del datepicker para declarar que dias están bloqueados (hay que bloquearlos).
- Usar los días bloqueados para representar los días no disponibles.
- Forzar estilos de los días bloqueados en el head para que se visualicen a tu gusto.
- Forzar funcionamiento de selección usando las clases del datepicker.
Estilos forzados de los días bloqueados:
Código:
<style type="text/css">
td.ui-datepicker-unselectable span.ui-state-default, td.ui-state-disabled span.ui-state-default{
background: red;
}
td.ui-datepicker-unselectable span.ui-state-active, td.ui-state-disabled span.ui-state-active{
background:#3053AB;
}
td.ui-datepicker-unselectable:hover, td.ui-state-disabled:hover{
cursor: pointer !important;
}
td.ui-datepicker-unselectable:hover span, td.ui-state-disabled:hover span{
cursor: pointer !important;
background: blue;
}
</style>
Evento que selecciona los días bloqueados:
Código:
var arrMonthNames = ["Enero", "Febrero", ...];
$(".ui-datepicker-unselectable").live("click", function(e){
// Si no es el dia bloqueado de otro mes
if (! $(this).hasClass("ui-datepicker-other-month")){
// Sacamos el mes que se esta visualizando actualmente a traves del datepicker
var strMonth = $(".ui-datepicker-month").html();
// Establecemos el dia, mes y anio
var intDay = $(this).find("span").html();
var intMonth = $.inArray(strMonth, arrMonthNames);
var intYear = $(".ui-datepicker-year").html();
// Guardamos en la variable global la fecha
datSelectedData = new Date(intYear, intMonth, intDay);
// Desmarcamos el dia seleccionado
trSelected = $(".ui-datepicker-calendar").find("td").find(".ui-state-active");
trSelected.removeClass("ui-state-active");
// Marcamos el dia seleccionado
$(this).find("span").addClass("ui-state-active");
// Pasamos el fullCalendar a vista por dias en la fecha seleccionada
$("#calendar").fullCalendar("changeView", "agendaDay");
$("#calendar").fullCalendar("gotoDate", datSelectedData);
}
});
Personalmente no recomiendo este tipo de cosas, porque si queremos mantener actualizado el datepicker, si éste sufre algún cambio en las clases que usa probablemente deje de funcionar. Por otro lado, de esta forma no podremos bloquear verdaderamente otros días. Igualmente les dejo el código porque puede que le sirva de ayuda a otras personas.
¡Saludos!