ESPAÑOL: ¡Bienvenido! Es la página inicial de OSIRIS LMS. Regístrese hoy mismo y obtenga acceso a todos nuestros CURSOS GRATUITOS. Clic aquí para registrarse ya. Hemos desarrollado una amplia gamma de cursos “online” (Programación, Multimedia, 3D, Habilidades suaves, etc.), disponibles 24X7. Para más detalle consulte la lista de Cursos Disponibles. Si tiene problemas con el acceso a la plataforma, vea el Tour Virtual de Osiris LMS. También puede consultar la sección de FAQ’s o enviar Solicitud de Soporte Técnico.

ForoForo de discusión
Calendario en JavaScript
Buscador:
Foro > JavaScript > Calendario en JavaScript

Enviado por: Texto del mensaje
Alejandro Aguilar
Nivel : Profesor
Mensajes : 1
> Perfil
Archivo adjunto :archivo
Escrito el : Jueves 17-08-2006 A las : 18:12 ( > un mes )
Asunto : Calendario en JavaScript
En este artículo les voy a explicar cómo pueden incluir un calendario en sus páginas Web de forma muy sencilla. Pensemos en diferentes situaciones donde podría ser útil; si nuestro visitante debe introducir una fecha en una caja de texto o en dos cajas con fecha de inicio y fecha fin, podemos simplificarle el trabajo ofreciéndole un calendario para que lo marque.

Lo primero que debemos hacer, es incluir en la página donde queremos que aparezca el calendario dos archivos .js, que en realidad hacen todo el trabajo.

<script type="text/javascript" src="resources/js/Fecha.js" ></script>
<script type="text/javascript" src="resources/js/Calendario.js" ></script>


También vamos a incluir un archivo de hojas de estilo para la parte visual del calendario, por cierto lo podemos modificar para adaptar al diseño grafico de nuestro sitio.

<link rel="STYLESHEET" type="text/css" href="resources/css/calendario.css"></link>

Posteriormente vamos crear una caja de texto, pensando que nuestro visitante solamente va a introducir una fecha, con los siguientes parámetros:

<input readonly=”true” type=”text” id=”idfecha1” name=”fecha1” value=”” size="10" onfocus=”idfecha1Calendar.showCalendar();”>

Vamos a analizar cada uno de los parámetros:

readonly=”true” : estamos especificando que nuestra caja de texto va a ser solamente de lectura, es decir, nuestro visitante solamente podrá seleccionar la fecha mediante el calendario y no teclearlo. Obviamente este parámetro es según los gustos de cada quien y lo podemos quitar en dado caso.
id=”idfecha1” : mediante este identificador vamos a hacer referencia a la caja de texto para pintar la fecha que seleccionemos del calendario.
onfocus=”idfecha1Calendar.showCalendar();” : al seleccionar la caja de texto, mediante el evento de JavaScript onfocus, invocaremos la función showCalendar que se define en Calendario.js. Más adelante les explicaré por qué invocamos de esta manera. Como se dan cuenta, podemos invocar el calendario directamente de la caja de texto o mediante un icono para el calendario con el evento onclick().

Ahora vamos a crear un contenedor donde se va a visualizar el calendario mediante el elemento <div> de esta manera:

<div id="idfecha1CalendarContiner" style=”display:none;” class=”calendario” ></div>

Nuevamente asignamos un identificador, le decimos que por defecto no va a ser visible (style=”display:none;”) y cuál va a ser el estilo que se define en calendario.css (class=”calendario”).

Ya nada más nos falta el último paso, crear el objeto calendario:

<script>
idfecha1Calendar = createCalendario( "idfecha1", "idfecha1CalendarContiner", "resources/img/", "MM-dd-yyyy", "spanish" );
</script>


Lo más interesante está aquí, como pueden observar estamos invocando una función llamada createCalendario y le pasamos cinco parámetros. Vamos a ver cada uno de ellos:

idfecha1 : es el identificador de nuestra caja de texto, se acuerdan que cuando la definimos le asignamos este identificador.
idfecha1CalendarContiner : es el identificar del contenedor donde se va a visualizar el calendario.
resources/img/ : es el path completo donde se encuentran todas las imágenes para el calendario.
MM-dd-yyyy : es el formato de la fecha, acepta prácticamente cualquier formato (ddmmyyyy, dd/mm/yy, etc.)
spanish : es el idioma del calendario (spanish|english)

Entonces creamos el calendario y lo asignamos a una variable que en este caso se llama idfecha1Calendar y esta variable es la que usamos en la declaración de la caja de texto para invocar la función showCalendar(). Antes de que les surja la duda de cómo se hace esto, les comento que en JavaScript se pueden similar los objetos, aunque no es un lenguaje de programación orientada a objetos. Si tiene curiosidad de cómo se hace esto puede analizar el archivo Calendario.js.

Si integramos todo el código quedará así:

<script type="text/javascript" src="resources/js/Fecha.js" ></script>
<script type="text/javascript" src="resources/js/Calendario.js" ></script>
<link rel="STYLESHEET" type="text/css" href="resources/css/calendario.css"></link>
<input readonly="true" type="Text" id="idfecha1" name="fecha1" value="" size="10" onfocus="idfecha1Calendar.showCalendar();">
<div id="idfecha1CalendarContiner" style="display:none;" class="calendario" ></div>
<script>
idfecha1Calendar = createCalendario( "idfecha1", "idfecha1CalendarContiner", "resources/img/", "MM-dd-yyyy", "english" );
</script>


Haga clic aquí para ver nuestro calendario en acción


Para obtener el código fuente del calendario, descargue el archivo adjunto y descomprima el contenido en cualquier directorio de su computadora.

Si tienen dificultades con la integración del calendario o dudas, me pueden contactar a esta dirección de correo: alex_puch@gmail.com.
Alejandro Aguilar Puch
Osiris LMS
Amplía tus conocimientos en línea
 
 
RbR
Nivel : Estudiante
Mensajes : 1
> Perfil
Escrito el : Miércoles 29-08-2007 A las : 23:53 ( > un mes )
Asunto : Re: Calendario en JavaScript
me a venido fenomenal, muchas gracias!!

tengo alguna pregunta que si fueras tan amable de respondertemelas te estaria muy agradecido (sorry de javascript no tengo ni idea). weno.. alla vá.

se podria hacer para que el primer dia de la semana fuera el lunes??
y como puedo hacer para que cuando se inserten los datos de la fecha de inicio y fin en la base de datos, se visualize un calendario en el que se marquen de color los dias que hemos insertado?

saludos
 
 
Daniel Salas
Nivel : Estudiante
Mensajes : 1
> Perfil
Escrito el : Miércoles 21-10-2015 A las : 08:37 ( > un mes )
Asunto : Muchas Gracias
Me ha gustado la usabilidad del código, ya tienes sus años, pero me será útil para mi aplicativo.