jQuery datePicker inline personalizado

[davidadanu]

Hola a todos,
Estoy usando datepicker + fullCalendar para manejar una agenda:

http://jqueryui.com/demos/datepicker/#inline

Usando el datepicker inline, necesito poder colorear los días que no estén disponibles de otro color (que es diferente a bloquearlos, ya que en este caso si podemos seleccionarlos).

En resumen: Necesito colorear los días que están llenos en la agenda de otro color en el datepicker.

Problema: Si lo fuerzo manualmente consigo colorear estos días, pero desde que seleccione otro día o haga cualquier acción en el datepicker, se me restablecen los colores originales (no hay eventos que me permitan forzarlo nuevamente tras las acciones).

¿Alguien tiene idea de cómo poder solucionar esto?

¡Saludos!

[quike88]

Hola,

Este tema te podría ser de ayuda, donde masterpuppet propone esta solución:

Código Javascript:

var events = ['15-1-2011', '16-1-2011', '17-1-2011', '18-1-2011'];
    
        $( "#datepicker" ).datepicker({
            showWeek: true,
            firstDay: 1,
            beforeShowDay: function(date) {
                var current  = date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
                return jQuery.inArray(current, events) == -1
                ? [true, '']
                : [true, 'ui-state-highlight', 'tool-tip-text'];
            }
});
 

Saludos.

[davidadanu]

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!