Calendario con Javascript
En dynarch.com ofrecen un calendario hecho con Javascript de código abierto (open source) que tiene el siguiente aspecto:
La forma de incorporar el calendario en una página Web es muy sencillo. Lo primero es incluir en el <head> el siguiente código:
<style type="text/css">@import url(calendar.css);</style>En la primera línea se indica la hoja de estilo (
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="calendar-es.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
calendar.css) a aplicar (en el código del calendario se incluyen varias hojas de estilo). Las siguientes tres líneas indican los scripts necesarios para el funcionamiento del calendario: calendar.js contiene la funcionalidad principal, calendar-es.js contiene el idioma del calendario (soporta más de 40 idiomas, entre ellos el español y el catalán), calendar-setup.js contiene la funcionalidad de configuración del calendario (Calendar.setup).A continuación hay que incluir el contenedor del calendario:
<div id="calendar-container" style="float: right"></div>Y el siguiente código Javascript:
<script type="text/javascript">También se puede utilizar el calendario como popup desde un botón, enlace, imagen, etc. Hay que incluir el siguiente código, en el que se crea un campo de texto y un botón desde el que se abrirá el calendario:
function dateChanged(calendar) {
if (calendar.dateClicked) {
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth();
var d = calendar.date.getDate();
window.location = "#";
}
};
Calendar.setup(
{
flat : "calendar-container",
flatCallback : dateChanged
}
);
</script>
<form action="#" method="get">Y la configuración del calendario:
<input type="text" id="date" name="date" />
<input type="button" id="trigger" value="..." />
</form>
<script type="text/javascript">Se puede ver un ejemplo del calendario en funcionamiento, tanto incrustado en la página como abierto desde un botón, en el siguiente enlace.
Calendar.setup(
{
inputField : "date",
ifFormat : "%d/%m/%Y",
button : "trigger"
}
);
</script>
El código del calendario se puede descargar desde aquí. Para más información de cómo configurar el calendario acceder a la documentación.
Spain
Mexico
Colombia
Peru
Chile
Venezuela
Argentina
Ecuador
United States
Dominican Republic
Bolivia
Panama
El Salvador
Costa Rica
Paraguay
Guatemala
Puerto Rico
Uruguay
Nicaragua
United Kingdom
32 comentarios:
Hi, If you want to see my 30 y.o. oldtimer car
visit my site
Albert
6 de abril de 2007 11:21
Hi, excellent blog
if you´re interested in CroTourism,
YachtCharters in the cleanest sea in Europe,
see my site.
Regards
6 de abril de 2007 11:31
David, por favor necesito me indiques donde puedo conseguir un calendario en español, con su codigo para colocar en la sidebar de blogger, muchas gracias
27 de junio de 2007 04:58
Te recomiendo que visites el siguiente post http://www.ribosomatic.com/articulos/10-calendarios-con-php-css-y-javascript/ y elijas tú mismo el que mejor se adapte a tus necesidades.
Un saludo.
27 de junio de 2007 07:31
David desde ya muchas gracias, pero como puedo hacer centrar el titulo de un elemento en la sidebar nadie me supo decir.
28 de junio de 2007 03:39
Siento no poder ayudarte.
Un saludo.
28 de junio de 2007 09:07
Hola
He probado en el explorer pero si no es en ingles, no me funciona sabes alguna solucion?
16 de julio de 2007 10:34
Mira el siguiente ejemplo: http://personales.ya.com/ertseam/calendar/.
El calendario está en castellano, tanto en la página como en el popup, y está probado bajo IE 7.
16 de julio de 2007 14:10
Hola, me podrias decir donde puedo coger el calendar_es.js. Es que lo tengo en ingles y no consigo que me cuadren los dias empezando en el lunes, me explico, se situan un dia mas tarde.
Gracias
13 de agosto de 2007 11:39
Hola,
Tienes que descargarte el código del calendario completo del calendario desde el siguiente enlace, y dentro de la carpeta LANG encontrarás el archivo CALENDAR-ES.JS.
Un saludo.
13 de agosto de 2007 13:28
Gracias, ya lo vi pero tengo una pregunta estoy intentando ver un ejemplo con el calendario en español y no lo encuentro.
Puedes decirme que tengo que hacer para verlo en español?
13 de agosto de 2007 14:04
Lo único que tienes que hacer es colocar esta línea en el HEAD: <script type="text/javascript" src="calendar-es.js"></script>
Puedes ver un ejemplo con el calendario en español aquí.
Un saludo.
13 de agosto de 2007 14:11
Hola
Estoy realizando el scrip como indicastes lo hice paso a paso como lo muestras pero cuando lo ejecuto me da un error en el javascript exactamente el error es 'Calendar' no esta definido porq puede ser este error me puedes ayudar Gracias
16 de noviembre de 2007 21:03
Excelente calendario, facilita el trabajo al usario, ya que no debe esperar respuesta del servidor ni apertura de un popup, pero hay un detalle, ojala puedan resolverlo, se trata del cambio de hora, en mi caso el dia Octubre 12 se repite en el calendario cuando se abre por segunda vez y concide con el dia de cambio de horario y otro detalle como puedo hacer que retorne la hora y minuto seleccionada en el calendario ?
AMB:::
ARICA
25 de noviembre de 2007 03:34
Otra cosa se me estaba olvidando, Cual deberia ser el metodo a utilizar cuando necesite ingresar muchas fechas, en mi caso se crean los campos dinamicamente, ya que son multiples fechas, por lo que se me complica aplicar el metodo que aparece en el ejemplo.
AMB:::
ARICA
25 de noviembre de 2007 03:39
Encontre la sgte pagina con una version aparentemente anterior y no presenta el error de cambio de fecha, ademas muestra como utilizar el calendario con multiples campos y algo especial la restriccion en seleccion de fechas, tambien presenta el rescate de la hora y minuto
http://www.childrensmrc.org/js/jscalendar/
AMB:::
ARICA
25 de noviembre de 2007 04:23
Hola David me gustaría saber si este calendario se puede usar con una master page en asp net ya que al aplicarlo en una pagina sin heredar de la master me funciona pero al utilizarla me sale Calendar.Setup: Nothing to Setup(No fields found); no se que pasa.
Gracias de antemano
Félix
19 de enero de 2008 02:16
Disculpa si soy persistente me imagino que no has de tener tiempo pero no se como resolver este problema y me parece muy fácil implementarlo en páginas que no heredan de la masterpage y queria saber si me podrias ayudar con un ejemplo en asp net con este calendario.
Gracias de antemano
Félix.
8 de febrero de 2008 23:08
Lo siento Félix, no te puedo ayudar.
Un saludo.
8 de febrero de 2008 23:12
Disculpa David y sabes quien me podría ayudar?....la verdad me urge dependo de esto para terminar mi tópico.
Gracias.
Félix
11 de febrero de 2008 22:36
David ya no es necesario ya lo pude resolver gracias a otro foro.
Gracias por tu atención.
Félix.
Por si acaso este es el enlace:
http://forums.asp.net/p/1116861/1734443.aspx#1734443
11 de febrero de 2008 23:51
Cuando ejecuto el script no se visualiza el calendario y aparece el sig error
'Calendar' no esta definido
7 de abril de 2008 17:24
hola a todos, tengo un problema con el calendario, cuando lo pongo, dentro de un control de usuario, y luego ese control lo invoco a un pagina cualquiera, el error q me muestra es el sgte,
Calendar._TT.DEF_DATE_FORMAT, es nulo o no es un objeto, me podria decir, como puedo solicionar este problema, nose, si se pondria un codigo en javascript adicional al control, donde tiene el codigo de usuario
de antemano, agradesco su ayuda.
4 de septiembre de 2008 14:58
Hola David,
Yo he estado batallando con el calendario, al principio me salia el error que te comento Pepe en IE, pero en Mozilla si funcionaba. Despues lo revise y no aparece nada.. Que crees que pueda ser?
14 de enero de 2009 22:31
Buenisimo el aporte David, funciona de 10, muchas gracias!
18 de febrero de 2009 14:16
hola david sabes el calendario me funciona bien en ie7 pero no ff3 cual es la solucion...
23 de marzo de 2009 06:36
Hola David,
Me sale un error que ya te han comentado anteriormente 'Calendar._TT.DEF_DATE_FORMAT' es nulo o no es un objeto. Lo estoy ejecutando en IE6. Hay alguna forma de que funcione en IE6.
Gracias por tu ayuda.
Gemma
24 de marzo de 2009 14:09
David
la verdad no se como solucionaste tu problema, me podrias ayudar. tengo el mismo problema con el masterpage y el calendar. No funciona, me sale el mensaje "Calendar setup Nothing to setup (no fields found). Please check your code "
Agradeceria mucho que me ayuden.
Gracias
mi correo es dsalazar@jjc.com.pe
28 de mayo de 2009 20:03
Necesito ayuda
calendar-setup.js que tengo me funciona bien en mozilla firefox, pero no lo hace en IE6, he probado algun parche x ahi y nada, una manito David.. gracias....
24 de agosto de 2009 16:56
Hola tengo el mismo prble.. el calendario no funciona en ie6.
pero anda a la perfección en ie7 , ie8 y mozilla
13 de octubre de 2009 17:26
Hola, tengo una pregunta como hacer para que el calendario este siempre visible y no detras de objetos (etiquetas, textbox, etc.)
Gracias por su ayuda
20 de octubre de 2009 00:01
Muchas gracias por el aporte...Nos ayudo mucho..Muy bien explicado..
27 de octubre de 2009 16:02
Publicar un comentario en la entrada