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
:
Ver originalfunction 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
:
Ver originalfunction 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