pro-Gramas tu biblioteca de programacion
Tutoriales de php
Hola a todos en este tutorial vamos a explicar como hacer un calendario en php y lo vamos a cargar en una página utilizando ajax, también los enlaces que nos permiten desplazarnos en los meses y los años están en ajax para que la pagine no tenga que cargarse de nuevo, además tiene un enlace que despliega un formulario el cual nos permite seleccionar el mes y el año al cual nos queremos mover, el rango de los años son 10 mas y 10 menos.
Lo primero que hay que hacer es crear la página principal, en la que cargaremos el calendario, en esta pagina tenemos que incluir las funciones para crear el objeto ajax, las funciones del navegador y formulario de desplazamiento, la hoja de estilo y el archivo php.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>calendario</title>
<style media="all" type="text/css" title="Estilo del Calendario">
@import "calendario.css";
</style>
<script src="ajax.js" language="javascript"></script>
<script src="cargar_ajax.js" language="javascript"></script>
</head>
<body>
<h1>Calendario</h1>
<?php
include("calendario.php");
?>
</body>
</html>
El archivo calendario.php es el mas importante, ya que en el se encuentran las funciones que crean el calendario, además que en el se forma la tabla que contendrá el formulario. Todo el archivo tiene comentarios para que lo entiendas más rápido, no mostramos este archivo por que es algo extenso pero al final del tutorial puedes descargar todos los archivos funcionando.
En el archivo ajax.js se encuentra la función que crea el objeto ajax:
function xmlhttp() { //crear el objeto de ajax
var xmlhttp;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { xmlhttp = new XMLHttpRequest(); }
catch (e) { xmlhttp = false;}}}
if (!xmlhttp) return null;
else return xmlhttp;
}
Y en el archivo cargar_ajax.js se encuentran las funciones otraFecha(opc) y Navegador(ano,mes), las cuales son las que permiten el desplazamiento en el calendario sin que se cargue la pagina. La función otraFecha carga el contenido del archivo cargarCalendario.php el cual contiene el formulario de ir a otra fecha, y la función Navegador carga el contenido del archivo calendario.php pero le envía el año y mes al cual se quiere mover, es algo enredoso si eres primerizo pero con un poco de análisis le entenderás.
function otraFecha(opc){ //funcin para cargar el formulario de ir a otra fecha
var ajax=xmlhttp();
ajax.onreadystatechange=function(){
if(ajax.readyState == 4){
links = "<a onclick=\"document.getElementById('otrafecha').innerHTML = ''\">Quitar ⇑</a>";
document.getElementById('otrafecha').innerHTML = ajax.responseText+links;
}
else
document.getElementById('otrafecha').innerHTML = '<img src="img/loading.gif" />Cargando...';
}
ajax.open("GET","cargarCalendario.php?opc="+opc,true);
ajax.send(null);
return false;
}
function Navegador(ano,mes){ //funcion para los link (navegar) del calendario
var ajax=xmlhttp();
ajax.onreadystatechange=function(){
if(ajax.readyState == 4)
document.getElementById('calendario').innerHTML = ajax.responseText;
else
document.getElementById('calendario').innerHTML = '<img src="img/loading.gif" />Cargando...';
}
ajax.open("GET","calendario.php?a="+ano+"&mes="+mes,true);
ajax.send(null);
return false;
}
Y el archivo cargarCalendario.php
<? if($_GET['opc']==0){ //carga el formualario de otrafecha ?>
<label for="mes">Mes: <select name="mes">
<?php
$nombremes = array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
for($c=1;$c<=12;$c++)
echo '
<option value="'.$c.'">'.$nombremes[$c-1].'</option>';
?>
</select></label>
<br /><label for="a">Año: <select name="a">
<?php
for($c=date("Y")-10;$c<=date("Y")+10;$c++)
echo '
<option value="'.$c.'">'.$c.'</option>';
?>
</select></label>
<br /><input type="button" onclick="Navegador(calendario.a.value,calendario.mes.value);" name="ir" value="Ir a la fecha"/>
<? } ?>
Descarga los archivos completas incluyendo el archivo calendario.css.
Descargar