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> <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>
En la primera línea se indica la hoja de estilo (
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">
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>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:
<form action="#" method="get"> <input type="text" id="date" name="date" /> <input type="button" id="trigger" value="..." /> </form>
Y la configuración del calendario:
<script type="text/javascript">
Calendar.setup(
{
inputField : "date",
ifFormat : "%d/%m/%Y",
button : "trigger"
}
);
</script>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.
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.
45 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, 4: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, 7: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, 3:39
Siento no poder ayudarte.
Un saludo.
28 de junio de 2007, 9: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, 20: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, 2: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, 2: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, 3: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, 1: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, 22:08
Lo siento Félix, no te puedo ayudar.
Un saludo.
8 de febrero de 2008, 22: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, 21: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, 22: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, 21:31
Buenisimo el aporte David, funciona de 10, muchas gracias!
18 de febrero de 2009, 13:16
hola david sabes el calendario me funciona bien en ie7 pero no ff3 cual es la solucion...
23 de marzo de 2009, 5: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, 13: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, 0:01
Muchas gracias por el aporte...Nos ayudo mucho..Muy bien explicado..
27 de octubre de 2009, 15:02
El calendario guay, me ha venido muy bien... thanks
www.lamandarinamecanica.es
14 de enero de 2010, 14:25
Hola, alguien sabe cómo insertar los links o enlaces en cada fecha?
1 de febrero de 2010, 2:31
Excelente aporte, despues de tanta búsqueda es satisfactorio encontrar un post tan explícito y completo.
Gracias.
16 de febrero de 2010, 3:27
Una muy buena solucion para añadir un calendario a mi formulario. Pero como puedo añadir dos selectores de fechas en un mismo formulario? Por ejemplo para seleccionar fecha de entrada y fecha de salida?
19 de febrero de 2010, 19:56
Alguien ha conseguido que funcione para IE6? Lo necesito urgente, gracias.
11 de junio de 2010, 12:57
Alguien ha conseguido que funcione para IE6? Gracias.
11 de junio de 2010, 12:57
como haces para meter dos calendarios en la misma pagina , el primero funciona pero el segundo no
30 de mayo de 2011, 18:56
fantastico muy completo y muy bueno, gracias me sirve mucho, saludos
13 de agosto de 2011, 20:54
para los que preguntaban que no se puede hacer mas de un indicador de fecha deben entrar a la pagina del propietario del producto y tienen un ejemplo.
http://www.dynarch.com/static/JSCal2/index.html
28 de diciembre de 2011, 20:01
este aporte es malisimo, no funciona para nada
21 de febrero de 2012, 23:11
este aporte es malisimo, no funciona para nada
21 de febrero de 2012, 23:15
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 IE8. Hay alguna forma de que funcione en IE8.
Gracias por tu ayuda.
Luman
15 de mayo de 2012, 16:35
con el cambio de horario me repite el dia 6 de septiembre, alguien me puede ayudar por favor
16 de septiembre de 2014, 21:43
Publicar un comentario