Calendario en PHP

Vamos a mostrar cómo hacer un calendario como este.
Descarga los archivo del calendario

Los usuarios registrados de DesarrolloWeb.com tienen la descarga disponible del
código del calendario.
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.
Copia los archivos del calendario

En el archivo comprimido de la descarga verás un directorio llamado
"calendario_dw". Copia ese directorio en cualquier carpeta de tu sitio web.
Añade la hoja de estilos del calendario
Tendrás que poner la etiqueta de carga de la hoja de estilos CSS que necesita el
calendario para que se vea correctamente en tu 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.
Incluye los scripts de jQuery y el plugin del

calendario
Ahora tienes que colocar los scripts Javascript para incluir el framework jQuery en
tu página y el plugin del calendario. Son dos scripts distintos que se deben incluir
por separado, con estas dos etiquetas:
<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.
Coloca el código HTML para mostrar un INPUT de
texto
Ahora debes colocar el elemento de formulario que se convertirá en un campo
fecha, con un poco de HTML como el que sigue:
<form>
Fecha: <input type="text" name="fecha" class="campofecha" size="12">
</form>
Convierte el campo de texto en un campo de
calendario con código Javascript
El último paso es colocar un script Javascript que invoque el plugin jQuery para
hacer que el campo de texto se convierta en un calendario.
<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.
Código completo de una página que utiliza el

plugin del calendario
A continuación puedes ver el código completo de una página que hace uso de
este plugin jQuery para implementar un selector de fecha.
<!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.

Calendario en PHP

Cargado por

Copyright:

Formatos disponibles

Calendario en PHP

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Calendario en PHP

Cargado por

Copyright:

Formatos disponibles

Vamos a mostrar cómo hacer un calendario como este.

Descarga los archivo del calendario

Copia los archivos del calendario

Incluye los scripts de jQuery y el plugin del

Código completo de una página que utiliza el

Para acabar, puedes ver el ejemplo en marcha en una página aparte.

Esperamos que el plugin del calendario te haya funcionado sin mayor

En el siguiente artículo comenzaremos a explicar paso por paso cómo se ha

También podría gustarte