var calendario = null;
function muestra_calendario(campo) {
  campo = $(campo);
  // Si no existe el campo pasado no hacemos nada
  if (campo == null) {
    return
  }
  // Primero escondemos el calendario, por si está abierto ya para otro campo
  esconde_calendario();
  // Creamos una instancia del calendario en la variable global calendario
  calendario = new scal('calendario', nueva_fecha.curry(campo), {
      titleformat: 'mmm yyyy',
      closebutton: 'X',
      dayheadlength: 2,
      weekdaystart: 1
  });
  // Si el usuario ha seleccionado ya una fecha para el campo, intentamos leerla para abrir el calendario con la fecha correcta seleccionada ya
  var date = new Date(campo.readAttribute('data-date'));
  if (date.valueOf() > 0) {
    calendario.setCurrentDate(date, true);
  }
  // Movemos el contenedor del calendario al lado del campo. !Esto sólo funciona bien si el FORM del campo tiene position:relative y el DIV calendario tiene position:absolute!
  var contenedor = $('calendario');
  Position.clone($(campo), contenedor, {setWidth: false, setHeight: false, offsetLeft: campo.getWidth() + 2, offsetTop: campo.getHeight() - contenedor.getHeight()});
  // Y por fin podemos mostrar el contenedor del calendario
  $("calendario").show();
}
function esconde_calendario() {
  // Escondemos el contenedor del calendario y eliminamos el calendario creado por la librería scal
  $('calendario').hide();
  if (calendario != null) {
    calendario.destroy();
    calendario = null;
  }
}
function nueva_fecha(campo, fecha){
  // Cambiamos el valor del campo a la nueva fecha con un formato especial
  $(campo).setValue(fecha.format('dd-mm-yyyy'));
  // Tambien guardamos la fecha en un formato estandard en un atributo creado por nosotros en el campo. Esto nos sirve para poder abrir el calendario con la fecha correcta si el usuario vuelve a hacer clic en el campo
  $(campo).writeAttribute('data-date', fecha.format('yyyy/mm/dd'));
  esconde_calendario();
}