Valoración del artículo:El objetivo de este artículo es mostrar a las personas que tengan un mínimo de conocimientos sobre Javascript, cómo implementar un sistema de calendario, pero sin complicarles la vida con explicaciones sobre cómo está hecho el script. Osea, daremos una simple receta para poder implementar el calendario jQuery en una web.
Vamos a mostrar cómo hacer un calendario como este.
En ese archivo para descarga vienen varias pruebas de las diferentes etapas del desarrollo del proyecto y los archivos necesarios para poner en marcha el calendario en cualquier web.
<link href="calendario_dw/calendario_dw-estilos.css" type="text/css" rel="STYLESHEET">
El lugar adecuado para poner esa etiqueta seria la cabecera de la página y tienes que asegurarte que la ruta hacia la hoja de estilos está correcta.
<script type="text/javascript" src="calendario_dw/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="calendario_dw/calendario_dw.js"></script>
Nuevamente, tienes que asegurarte que las rutas a los archivos del calendario están bien puestas. Estas etiquetas, en principio, también deberían colocarse en la cabecera.
<form>
Fecha: <input type="text" name="fecha" class="campofecha" size="12">
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".campofecha").calendarioDW();
})
</script>
Ese script lo puedes colocar en cualquier lado del código HTML y, una vez que cargue la página, hará que el campo de texto se convierta en un campo para escribir una fecha por medio del calendario.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Probando el plugin jQuery de calendario_dw</title>
<link href="calendario_dw/calendario_dw-estilos.css" type="text/css" rel="STYLESHEET">
<style type="text/css">
body{
font-family: tahoma, verdana, sans-serif;
}
</style>
<script type="text/javascript" src="calendario_dw/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="calendario_dw/calendario_dw.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".campofecha").calendarioDW();
})
</script>
</head>
<body>
<h1>Plugin calendario</h1>
<form>
Fecha: <input type="text" name="fecha" class="campofecha" size="12">
</form>
</body>
</html>
Puedes copiar y pegar ese código HTML y debe funcionarte el calendario, siempre que verifiques que las rutas a los recursos como la hoja de estilos CSS y los scripts están correctas.
Para acabar, puedes ver el ejemplo en marcha en una página aparte.
Esperamos que el plugin del calendario te haya funcionado sin mayor complicación. Podrás comprobar que hemos colocado el calendario con colores básicos en escala de grises, para que encaje en el diseño de cualquier web. Podrás cambiar esos colores y muchas otras cosas en la hoja de estilos CSS. Si haces cualquier cambio que crees que merezca la pena para que lo vean otras personas, por favor envíanoslo para publicarlo.
En el siguiente artículo comenzaremos a explicar paso por paso cómo se ha creado este plugin jQuery.
Compartir en redes sociales
| Determinar el primer dia de semana | 15/12/2010 |
 x_m | Problemas al seleccionar las fechas | 23/12/2010 |
wilver_... | Muy buen DatePicker | 04/1/2011 |
| Formato de Calendar | 04/1/2011 |
visualb... | Textbox asp.net | 29/1/2011 |
luis_sa... | compatibiidad IE6 | 28/8/2011 |
david_a... | Formato de Fechas | 09/11/2011 |
thenine... | Problema con explorer 8.0.7601 | 20/4/2012 |
Usuarios: 
14 de diciembre de 2010
