DHTML Calendar

  • Por
Un script en Javascript muy fácil de utilizar y con un aspecto formidable, que nos servirá para disponer de un calendario para seleccionar un fecha.
Cuando realizamos una interfaz de usuario, es típico tener campos donde el visitante deba introducir una fecha. Éstas tienen formatos bastante estrictos y son complicadas de escribir, por lo que es muy cómodo para el usuario contar con la posibilidad de utilizar un calendario para seleccionar la fecha.

En DesarrolloWeb.com hemos publicado un manual donde se explica cómo construir un calendario con PHP, un conocido lenguaje de programación de webs del lado del servidor. Ahora bien, no siempre el visitante va a tener la capacidad de entender la programación en PHP, o acceso a un servidor que permita la publicación de contenidos programados con PHP.

Por ello, será muy interesante conocer otras maneras de implementar un calendario en una página web. En este caso vamos a presentar DHTML Calendar, un calendario realizado en Javascript, compatible para todos los navegadores. Este script para incorporar un calendario es gratuito, por lo que podemos utilizarlo sin ningún tipo de límite.

Cómo es DHTML Calendar

Es un sistema muy potente y fácilmente configurable, con una interesante interfaz, totalmente dinámica. Se puede incluir de diversas maneras dentro de una página, como un popup, o directamente en el cuerpo de la página, lo que lo hace útil en diversas situaciones.

El script para configurar el calendario variará de un modo de presentación a otro. En la descarga del calendario se ofrecen algunos ejemplos rápidos para mostrar el calendario. Ejemplos para los impacientes, que pueden venir muy bien para empezar rápidamente. Una de las maneras más típicas de presentar el calendario puede ser utilizando un campo de texto y un botón. Al pulsar el botón se muestra el calendario y, una vez seleccionada una fecha, se escribe en el campo de texto.

El código del ejemplo sería el siguiente, muy parecido a uno de los ejemplos para los impacientes proporcionados en el paquete de descarga.

<html>
<head>

  <title>Calendario de pruebas</title>

  <!-Hoja de estilos del calendario -->
  <link rel="stylesheet" type="text/css" media="all" href="calendar-green.css" title="win2k-cold-1" />

  <!-- librería principal del calendario -->
 <script type="text/javascript" src="calendar.js"></script>

 <!-- librería para cargar el lenguaje deseado -->
  <script type="text/javascript" src="lang/calendar-es.js"></script>

  <!-- librería que declara la función Calendar.setup, que ayuda a generar un calendario en unas pocas líneas de código -->
  <script type="text/javascript" src="calendar-setup.js"></script>

</head>

<body>

<!-- formulario con el campo de texto y el botón para lanzar el calendario-->
<form action="#" method="get">
<input type="text" name="date" id="campo_fecha" />
<input type="button" id="lanzador" value="..." />
</form>

<!-- script que define y configura el calendario-->
<script type="text/javascript">
   Calendar.setup({
    inputField     :    "campo_fecha",     // id del campo de texto
     ifFormat     :     "%d/%m/%Y",     // formato de la fecha que se escriba en el campo de texto
     button     :    "lanzador"     // el id del botón que lanzará el calendario
});
</script>

</body>
</html>


El código anterior está comentado para que se entienda más fácilmente. Tiene varias partes.
  • En la cabecera se incluyen varios ficheros con las funciones y estilos del calendario. Estos ficheros se encuentran en los archivos de descarga del calendario. Existen varios estilos que se pueden utilizar para ajustar el aspecto del calendario al diseño de la página. También se debe incluir el lenguaje en el que presentar el calendario, en este caso español, que está también incluido en el paquete de descarga.
  • Ya en el cuerpo de la página, se muestra el formulario. Es muy simple, pues sólo tiene un campo de texto y un botón para mostrar el calendario.
  • En el script de javascript, también dentro del cuerpo de la página, se utiliza la función Calendar.setup, que sirve para cargar el calendario y configurarlo con los valores que deseemos. Todas las opciones de configuración tienen valores por defecto, aunque siempre vamos a tener que definir, como mínimo, los datos que ponemos en este ejemplo. El dato "inputField" sirve para indicar el identificador (atributo id) del campo input donde se tiene que escribir la fecha. El valor "ifFormat" sirve para ajustar el formato de la fecha que se desea escribir en el campo de texto. Por último, el valor "button" debe contener el identificador del botón que lanzará el calendario al pulsarlo.

Ha sido un ejemplo lo más simplificado posible. Podemos ver la marcha del calendario que genera este código en una página aparte.

En la documentación podremos encontrar más ejemplos del calendario y una explicación detallada de su utilización.

Más información en la página del producto: http://www.dynarch.com/projects/calendar/

DHTML Calentar es un proyecto alojado en SourceForge.net, con la siguiente página de proyecto: http://sourceforge.net/projects/jscalendar

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Bryan

13/2/2006
Muy interesante y muy util ademas que su nivel de configuracion es bastante elevado. Lo configure de acuerdo a mis ecesidades pero lo que hago es kargar el codigo con AJAX para que luego de seleccionar en una lista desplegable me muestre el calendario pero no lo hace no se como establecer una función para que cuando carge se ejecute el script y muestr el calendario.
Saludos

Leandro

23/6/2006
Para mostrar 2 calendarios en la misma pagina tenes que ponerle distinto ID al boton o imagen que hace que se muestre el calendario. Luego tenes que repetir el codigo js que muestra el calendario y ponerle en button el id de un boton y en el otro el id del otro.
Espero haber sido lo mas claro posible.
Por las dudas:
<!-- script que define y configura el calendario-->
<script type="text/javascript">
Calendar.setup({
inputField : "campo_fecha", // id del campo de texto
ifFormat : "%A %d / %B %I:%M %p", // formato de la fecha que se escriba en el campo de texto
showsTime : true,
button : "lanzador" // el id del botón que lanzará el calendario
});
</script>
<!-- script que define y configura el calendario-->
<script type="text/javascript">
Calendar.setup({
inputField : "campo_fecha2", // id del campo de texto
ifFormat : "%A %d / %B %I:%M %p", // formato de la fecha que se escriba en el campo de texto
showsTime : true,
button : "lanzador2" // el id del botón que lanzará el calendario
});
</script>

Saludos,

lolo

30/10/2006
hay un pegeño bug en el archivo español, le falta la línea de código Calendar._FD = 0; al archivo calendar-sp.js, sin esta línea no se ven los dias.
un saludo

Nely

25/1/2009
Me funciona bien, pero Cómo hago para que la fecha se pase a una base de datos??
gracias

manuel

12/5/2009
bastante util
me parece un buen trabajo... se encuentran muchos pero pocos funcionan como este...
gracias.

b-boy peter

24/5/2009
genial el material
Gracias por el material, me funciona 100%.

edwion_nuez

15/7/2009
Excelente
justo lo q queria aunq he visto mucho mas dinamicos, pero es buen aporte para empeza gracias de antemano.

jose_luis_benito-564301

19/10/2009
Muy buena herramienta
Es muy completo .... ahora, me estoy encontrando con el problema de que no puedo recuperar el contenido desde una hoja php. via post.

francisco

21/10/2009
me da un error en Octubre!!!!
Selecciono una fecha de octubre (cualquier año) y al ver el calendario otra vez aparece repetido el 10!!!!!!!!!!

A alguien más le pasa??

gabriel_romn

26/1/2010
duda con este calendario
Alguien puede decirme como puedo implementar este calendario.setup en campos dinamicos ya que lo hice pero me da error en IE
la forma en que lo estoy creando es la siguiente

if (_ie){
//CONDICION PARA IE
elementoInput = document.createElement("<input name='txtFin" + r + "' value='dd/mm/yyyy' id='txtFin" + r + "' maxlength='10' size='10' onClick='' onKeyPress='' onFocus='javascript:Calendar.setup({ inputField:'txtFin" + r + "', ifFormat:'%d/%m/%Y', button :''});"); ' />");
} else {
//CONDICION PARA OTRO NAVEGADOR COMO MOZILLA
elementoInput = document.createElement("input");
elementoInput.setAttribute("name", "txtFin" + r);
elementoInput.setAttribute("id", "txtFin" + r);
elementoInput.setAttribute("onBlur", "");
elementoInput.setAttribute("value","dd/mm/yyyy");
elementoInput.setAttribute("title","Clic sobre la caja para ver Calendario");
elementoInput.setAttribute("onFocus", "javascript:Calendar.setup({ inputField:'txtFin" + r + "', ifFormat:'%d/%m/%Y', button :''});");
elementoInput.setAttribute("onKeyPress","return LP_data_fecha(event)");
elementoInput.setAttribute("onBlur","javascript:validaFecha(this), Comparafechas(form.txtInicio" + r + ",form.txtFin" + r + ", form)");
}
elementoCelda.appendChild(elementoInput);
elementoRenglon.appendChild(elementoCelda);



Ojo: en Mozilla me funciona bien el problema es en internet explorer me dice error de sintaxis ojala alguien ya haya echo algo con formularios dinamicos y me pueda ayudar muchas gracias de antemano

Miguel Manuel

26/3/2010
Problema con el Calendario
Como puedo descargar el calendario.js

Yorkaev

18/4/2010
Calendario en formulario dinamico
He leido en los comentarios que alguien tenia un problema con un formulario dinamico y el calendario. Yo tengo este codigo tanto para IE como para mozilla y funciona 100%.

En un fichero javascript tengo esto al añadir una celda.

function addNewRow() {
var TABLE = document.getElementById("employmentH");

var newRow = TABLE.insertRow(-1);


// window.alert(content);
copyRow(newRow);
}

function copyRow(Trow) {

var TABLE = document.getElementById("employmentH");
var index = TABLE.rows.length-1;

str = "<td> <table width='100%'><tr><td><input id='calendar-inputFieldFrom"+index+"' class='datesEmployment' name='DateFrom' /> <button type='button' class='datesEmploymentImage' id='calendar-triggerFrom"+index+"'>From</button></td></tr><tr><td><input id='calendar-inputFieldTo"+index+"' class='datesEmployment' name='DateTo'/> <button type='button' class='datesEmploymentImage' id='calendar-triggerTo"+index+"'>To</button> </td> </tr> </table> </td>";
appendCell(Trow, str);


Calendar.setup({ trigger: "calendar-triggerFrom" + index, inputField: "calendar-inputFieldFrom" + index });
Calendar.setup({ trigger: "calendar-triggerTo" + index, inputField: "calendar-inputFieldTo" + index });

}

str = "<td> <table width='100%'><tr><td><input id='calendar-inputFieldFrom"+index+"' class='datesEmployment' name='DateFrom' /> <button type='button' class='datesEmploymentImage' id='calendar-triggerFrom"+index+"'>From</button></td></tr><tr><td><input id='calendar-inputFieldTo"+index+"' class='datesEmployment' name='DateTo'/> <button type='button' class='datesEmploymentImage' id='calendar-triggerTo"+index+"'>To</button> </td> </tr> </table> </td>";
appendCell(Trow, str);


Calendar.setup({ trigger: "calendar-triggerFrom" + index, inputField: "calendar-inputFieldFrom" + index });
Calendar.setup({ trigger: "calendar-triggerTo" + index, inputField: "calendar-inputFieldTo" + index });

}

function appendCell(Trow, txt) {
var newCell = Trow.insertCell(Trow.cells.length);
newCell.innerHTML = txt;
}

Segun he visto usais para el triger el elemento button. Alomejor estoy usando otra version de esta libreria pero el funcionamiento deberia ser el mismo.

Un saludo

Yorkaev

18/4/2010
editar
Perdonar, he copiadod mal el codigo y he repetido algunas lineas. Este seria el correcto.

function addNewRow() {
var TABLE = document.getElementById("employmentH");

var newRow = TABLE.insertRow(-1);


// window.alert(content);
copyRow(newRow);
}

function copyRow(Trow) {

var TABLE = document.getElementById("employmentH");
var index = TABLE.rows.length-1;

str = "<td> <table width='100%'><tr><td><input id='calendar-inputFieldFrom"+index+"' class='datesEmployment' name='DateFrom' /> <button type='button' class='datesEmploymentImage' id='calendar-triggerFrom"+index+"'>From</button></td></tr><tr><td><input id='calendar-inputFieldTo"+index+"' class='datesEmployment' name='DateTo'/> <button type='button' class='datesEmploymentImage' id='calendar-triggerTo"+index+"'>To</button> </td> </tr> </table> </td>";
appendCell(Trow, str);


Calendar.setup({ trigger: "calendar-triggerFrom" + index, inputField: "calendar-inputFieldFrom" + index });
Calendar.setup({ trigger: "calendar-triggerTo" + index, inputField: "calendar-inputFieldTo" + index });

}

str = "<td> <table width='100%'><tr><td><input id='calendar-inputFieldFrom"+index+"' class='datesEmployment' name='DateFrom' /> <button type='button' class='datesEmploymentImage' id='calendar-triggerFrom"+index+"'>From</button></td></tr><tr><td><input id='calendar-inputFieldTo"+index+"' class='datesEmployment' name='DateTo'/> <button type='button' class='datesEmploymentImage' id='calendar-triggerTo"+index+"'>To</button> </td> </tr> </table> </td>";
appendCell(Trow, str);


Calendar.setup({ trigger: "calendar-triggerFrom" + index, inputField: "calendar-inputFieldFrom" + index });
Calendar.setup({ trigger: "calendar-triggerTo" + index, inputField: "calendar-inputFieldTo" + index });

}

function appendCell(Trow, txt) {
var newCell = Trow.insertCell(Trow.cells.length);
newCell.innerHTML = txt;
}

Yorkaev

18/4/2010
Edicion ultima
function addNewRow() {
var TABLE = document.getElementById("employmentH");

var newRow = TABLE.insertRow(-1);


// window.alert(content);
copyRow(newRow);
}

function copyRow(Trow) {

var TABLE = document.getElementById("employmentH");
var index = TABLE.rows.length-1;

str = "<td> <table width='100%'><tr><td><input id='calendar-inputFieldFrom"+index+"' class='datesEmployment' name='DateFrom' /> <button type='button' class='datesEmploymentImage' id='calendar-triggerFrom"+index+"'>From</button></td></tr><tr><td><input id='calendar-inputFieldTo"+index+"' class='datesEmployment' name='DateTo'/> <button type='button' class='datesEmploymentImage' id='calendar-triggerTo"+index+"'>To</button> </td> </tr> </table> </td>";
appendCell(Trow, str);


Calendar.setup({ trigger: "calendar-triggerFrom" + index, inputField: "calendar-inputFieldFrom" + index });
Calendar.setup({ trigger: "calendar-triggerTo" + index, inputField: "calendar-inputFieldTo" + index });

}

function appendCell(Trow, txt) {
var newCell = Trow.insertCell(Trow.cells.length);
newCell.innerHTML = txt;
}

zxczxc

10/6/2010
zczcx
<zxc<zxcz<xccccccccccc

El_estudiante

06/10/2010
Enviar a php con metodo post y evitar que el calendario aparezca descolocado en algunos navegadores
Para que se envíe correctamente el contenido del campo de texto con la fecha a través de post a un archivo php para procesarlo, hay que poner el atributo name:

<input type='text' id='fecha' name='fecha' />


Cuando situamos el campo de texto demasiado abajo en la página, en algunos navegadores el calendario aparece arriba, por lo que en algunas ocasiones no se ve. Esto se soluciona indicando la posición del calendario explícitamente:

Calendar.setup({
...
position : [500,800]
...
});

mayra

20/1/2011
Ejecuto el codigo pero no me despliega nada
alguien me puede ayudar porque el codigo lo paso a un archivo que se llama calendar.html y no funciona que es lo que stoy haciendo mal

ayudenme

gracias

wilder

28/1/2011
como utilizo el codigo de calendario dinamico por Yorkaev
acabo de ver el codigo de calendario dinamico por Yorkaev, aunque no entendi muy bien pero estoy interesado, me gustaria que hubiesen puesto si kiera algún ejemplo de su uso para entenderlo mejor y como funciona.

margarita20

28/3/2011
Gracias
Gracias por el calendario.

Cristian

17/5/2011
Leandro probe pero no funciona
Leandro yo habia pensado en la misma solución pero no funciona , un calendario lo toma pero el otro no , al parecer es por una variable temporal para definir la fecha, ¿alguien sabe otra solución?

moises

18/7/2013
para saber donde estan unos archivos
Buenos dias les saludo y declaro bendiciones de parte de Dios para ustedes la pregunta es dodne se encuentran los archivos siguientes: calendar-green.css;calendar.js;lang/calendar-es.js;calendar-setup.js por favor los necesito urgente si alguien me puede decir

alexiojeda

12/11/2013
Comenzar en una fecha diferente a la actual
Como podria hacer para que al hacer clic en el calendario empiece desde una fecha diferente a la actual? Necesito fijar una fecha diferente...

alexiojeda

12/11/2013
Comenzar en una fecha diferente a la actual
Como podria hacer para que al hacer clic en el calendario empiece desde una fecha diferente a la actual? Necesito fijar una fecha diferente...

Rafael_gonzalez

05/2/2014
Cambiar el boton por una imagen
Hola, estoy intentando cambiar el boton por una imagen;

<!-- formulario con el campo de texto y el botón para lanzar el calendario-->
<form action="#" method="get">
<input type="text" name="date" id="campo_fecha" />
<input type="image" id="imagen_calendario" src="../calendario.jpg">
</form>

<!-- script que define y configura el calendario-->
<script type="text/javascript">
Calendar.setup({
inputField : "campo_fecha", // id del campo de texto
ifFormat : "%d/%m/%Y", // formato de la fecha que se escriba en el campo de texto
button : !!!!--- "imagen_calendario"---- !!!!! // el id del botón que lanzará el calendario
});
</script></body></html>
Cuando clikeo en la imagen, directamente me hace el submit del formulario.
Por que ocurre? Como podria solucionarlo?!!
Un saludo!