Usted está aquí: Inicio Componentes Avanzados Calendario UCA

Calendario UCA

El calendario UCA es una utilidad para mostrar un calendario en una página web. Su uso se basa en javascript y se puede utilizar en cualquier página web.

Utilización

Para mostrar el calendario serán necesarias tres cosas:

  1. Incluir los estilos y la librería javascript necesaria
    <link rel="stylesheet" type="text/css" href="http://www.uca.es/static/css/uca_calendar.css"> <script language="javascript" type="text/javascript" src="http://www.uca.es/static/js/uca_calendar.js"></script>
  2. Declarar los estilos de las excepciones, esto es, días con un estilo diferente al normal y los titulos para cada estilo (de entre los estilos disponibles)
    <script LANGUAGE='JavaScript'> /* Los estilos disponibles son: ( dia_normal, dia_reducida, dia_cerrada, dia_festivo, dia_festivoLocal ) */ /* vTitles: Vector con los estilos y su descripción correspondiente, separados por ':::'. Por ejemplo: */ var vTitles = []; vTitles.push("dia_normal:::Biblioteca abierta de 8:30 a 15:00 horas"); vTitles.push("dia_reducida:::Biblioteca abierta de 9:00 a 14:00 horas"); vTitles.push("dia_cerrada:::Biblioteca cerrada"); vTitles.push("dia_festivo:::Biblioteca cerrada (festivo)" ); vTitles.push("dia_festivoLocal:::Biblioteca cerrada (fiesta local)" ); /* vExceptions: Vector con las fechas (en formato 'DD/MM/YYYY') que se mostrarán con un estilo particular, separados por ':'. Por ejemplo: */ var vExceptions = []; vExceptions.push("27/09/2013:dia_festivo"); vExceptions.push("07/10/2013:dia_festivoLocal"); vExceptions.push("01/11/2013:dia_festivo"); vExceptions.push("05/03/2014:dia_reducida"); vExceptions.push("06/03/2014:dia_reducida"); vExceptions.push("07/03/2014:dia_cerrada"); vExceptions.push("31/07/2014:dia_reducida"); </script>
  3. Llamada final a la función javascript showCalendar() que es la que muestra el calendario. Parámetros:
    • Fecha Inicial: En formato 'DD/MM/YYYY'
    • Fecha Final: En formato 'DD/MM/YYYY'
    • Ancho del Calendario: Es posible especificar el ancho del calendario, p. ej. : '90%', '450px', ...
    • Título: El título que se mostrará en el calendario
    • Vectores vExceptions y vTitles: Los vectores anteriormente declarados
    <script type="text/javascript">showCalendar("01/09/2013", "11/09/2014", "100%", "Calendario Ejemplo", vExceptions, vTitles);</script>

  • A continuación se muestra como quedaría la inclusión del calendario en la presente página:

Acciones de documento
Favoritos / Compartir