Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso.
Las cookies de este sitio web se usan para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Además, compartimos información sobre el uso que haga del sitio web con nuestros partners de redes sociales, publicidad y análisis web, quienes pueden combinarla con otra información que les haya proporcionado o que hayan recopilado a partir del uso que haya hecho de sus servicios. Puede cambiar la configuración u obtener más información aquí

Aceptar

Calendario con efemérides y eventos

Google

Fechas y horas (manejo de tiempo)

Calendario con efemérides y eventos

Script para insertar un calendario que marca el día actual por defecto, y también señala si hay algún evento o efeméride asociado a ese día.

Se puede poner la fecha para un evento concreto y único para un día determinado (día, mes y año) o para algo que se repite todos los años como cumpleaños, santos y celebraciones en general (formato día y mes)

Puede asociarse un enlace (link) a cada evento (opcional)

Se le puede pedir que liste todos los eventos y efemérides del mes.

La instalación es sencilla, basta con poner algún contenedor dentro del formulario con un id determinado.

El aspecto se maneja desde una hoja de estilos css.

Publicado el 21-Abr.-07

ver el código fuente del ejemplo

Configuración

var idContenedor = "miCalendario" //Identificador del contenedor donde se quiera insertar el calendario
var calendarioCursor = "pointer" //cursor a mostrar
var calendarioPaddingCelda = 3; //Corrige la posición del cuadro que marca el día seleccionado en caso de haberse aplicado un padding a las celdas
var tagTitulos = 'h2' //Tag a usar en los títulos de eventos y efemérides
var textoVerTodos = 'Listar todo el mes'

Para los eventos y efemérides creamos listados por meses.

var enero = new Array();

A cada mes le añadimos un nuevo objeto evento pasándole los siguientes parámetros:

Fecha (Obligado): en formato aaaammdd o mmdd
Título (Obligado): Título del evento o efeméride. También se usará para enlazar con otro documento si se usa un link
Texto (Obligado): Texto descriptivo asociado al evento. Si no se quiere poner un texto se debe enviar en el parámetro una cadena vacía ''
Enlace (Opcional): URI del recurso con el que se quiera enlazar (link)

enero.push(new evento('0101', 'Año Nuevo', 'Felíz año Nuevo','http://es.wikipedia.org/wiki/1_de_enero'))

El resto de aspectos se configuran desde la hoja de estilos

#mesCalendario para configurar aspectos de la caja que muestra el mes y el año
.diaS para configurar aspectos de la caja que muestra los días de la semana
.celda para configurar aspectos de la caja que muestra los días del mes
.Hoy para configurar aspectos de la caja que muestra el día actual
.selectores para configurar aspectos de los campos para el mes y el año
.cuadroTexto para configurar aspectos del cuadro donde se muestran las efemérides
.hayEvento para configurar el aspecto de la casilla en el calendario que contiene elevento o efeméride
.cambiaMes para configurar el aspecto de los controles para pasar los meses (adelante y atrás)

La configuración se hace desde el archivo calendarioefemerides_config.js que habrá que incluír en el documento.

<script type="text/javascript" src="calendarioefemerides_config.js"></script>

A continuación incluír el archivo calendarioefemerides.js

<script type="text/javascript" src="calendarioefemerides.js"></script>

Incluír también la hoja de estilos de nombre calendarioefemerides.css

<link href="calendarioefemerides.css" rel="stylesheet" type="text/css" />

Finalmente hay que iniciar el calendario, podemos usar el evento onload del tag body

<body onload="tunCalendario();establecerFecha()" >

...y creamos un contenedor con el nombre asignado en la configuración

<div id="miCalendario">
</div>

Mostrar código

Parte código javascript [Seleccionar] 
Parte código css [Seleccionar] 


Buscador de animales en adopción
Creative Commons License
Javascript códigos by tunait is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 2.5 España License.
Permissions beyond the scope of this license may be available at http://tunait.com/javascript/index.php?s=condiciones.

Todos los códigos incluídos los de la página han sido paridos y tecleados por tunait.com. Política de cookies subir