marcar determinados dias en datepicker de jquery

[davidj]

Hola a todos,

Me gustaría saber como marcar con otro color determinados días del calendario datepicker de jquery (sin desactivarlos, solo marcarlos).

Gracias de antemano !!

[chicohot20]

Si te refieres a marcar dias festivos o feriados.

Aquí hay un link, pruebalo y comenta si te funcionó:

http://dev.jqueryui.com/ticket/4610

[davidj]

Hola chicohot,

No seria para dias festivos. Estoy diseñando una agenda utilizando datepicker y los dias que contienen datos deseo marcarlos en el calendario con un color diferente, es decir, lo que necesito es decirle a datepicker los dias deseo marcar con determinado color...

[davidj]

¿ Alguien sabe algo?

Necesitaría marcar, es decir, seleccionar, con un color determinado ciertos días del calendario...

A ver si alguien puede echar una mano!!!!!

[shava]

Hola David, estoy en las mismas que tu.

He llegado a la conclusión de tener que hacer lo siguiente
onChangeMonthYear, evento cuando cambias de mes.
onChangeMonthYear: function(year, month, inst) {
/* Ahora hay que cambiar de color los dias en que coincida con una entrada de la agenda*/

/* Refresco el calendario para que quede con los cambios realizados*/
$("#calendario").datepicker("refresh");

}

Según lo que he podido leer en diferentes foros, el truco sería ir jugando con el añadir y quitar clases a los dias, ya que si inspeccionas el código con chrome aparece cosas como

Código:

<a class="ui-state-default ui-state-highlight ui-state-active" href="#">1</a>

Si el dia 1 lo tengo marcado.

Lo ideal sería yo aplicarle un estilo (por ejemplo yo tengo .diaMarcado preparado para añadírselo), pero me quedo ahí.

Si adelantas algo del tema te lo agradecería también


Edito el post para comentarte que ya he encontrado una solución. La diferencia de lo que pides tu es que yo desactivo aquellos dias que no entran en la agenda.

Al final la solución pasó por:

Utilizar el evento onBeforeShowDay, que será el encargado de ver si un botón tiene entrada de calendario o no

Código Javascript:

function onBeforeShowDay(thedate){
        var theday = thedate.getDate();
        if( $.inArray(theday,specialDays) == -1 ) return [false,""];
        return [true,""];
    }
 

En tu caso en vez de return [true,""] sería un return [¿es seleccionable?,Nombre de la clase,tooltip popup opcional], ahí le tendrás que dar los efectos que quieras.


Luego simplemente falta que con el evento de cambiar mes / año metas los valores en el array specialDays que es el encargado de recoger esos valores. Yo utilizo $.ajax para recoger en texto plano de un php con mysql los valores. Ahí ya dependerá de lo que programes.

Código Javascript:

function onOnChangeMonthYear(year, month, inst)
    {
        $.ajax({
            async:false,    
            type:"POST",
            dataType: "text",
            url: "../comun/funcionesDias.php",
            data: "mes=" + month + "&anyo="+year,
            success: function(data){
                //alert(data);
                var valores=data.split(",");
                var definitivo = new Array() 
                for (var x=0;x<valores.length;x++){
                    definitivo[x]=parseInt(valores[x]);
                }
                specialDays=definitivo;
                $('#calendario').datepicker("refresh");
            },
        });
    }
 

Yo he hecho más trabajo del que toca haciendo un array llamado definitivo, ya que el datepicker no se traga arrays de cadena, y me ha tocado trasforma a enteros los valores del array, seguro que hay alguna forma más rápida.

Me faltará ver como cambiar el estilo al botón que se queda siempre pulsado de un mes al otro, que quiero que todos los botones aunque cambie el mes tengan el mismo estilo.

Espero haber sido de ayuda.

Un saludo

[GuppYes]

Revisa esto.

Código:

	$("#datepicker").datepicker({
	   onSelect: function(textoFecha, objDatepicker){
	   },
	   beforeShowDay: function (day) {
               var day = day.getDay();
               if (day == 5 || day == 6 || day == 0) {
                   return [false, "unaclase"]
               } else {
                 return [true, "otraclase"]
               }
       }
	});

[davidj]

Gracias a todos, le daré un vistazo!