Pequeño calendario con PHP y jQuery

Hace poco en un artículo explicando un mantenimiento de datos con PHP, MySQL y AJAX (con jQuery) adjunte un pequeño calendario hecho con PHP. No pude explicar su funcionamiento, pero ahora lo haré rapidamente. No se trata de un calendario avazando y con muchas opciones de configuración, pero es funcional para salir de apuros. Espero les sea de utilidad. [Ver demo] [Descargar]
El archivo principal se llama calendario.php, tiene 3 funciones:

• ultimoDia, nos averigua el último día del mes y año a mostrar con fin de totalizar los días que se mostrarán en un tabla html.
•  calendar_html, muestra la cabecera del calendario un combo select para mes y otro para el año. También muestra los días según el mes y año llamando a la función calendar.
• calendar, arma una tabla html para mostrar los días según mes y año seleccionados.

<?php
function ultimoDia($mes,$ano){
 $ultimo_dia=28;
 while (checkdate($mes,$ultimo_dia + 1,$ano)){
 $ultimo_dia++;
 }
 return $ultimo_dia;
}
function calendar_html(){
 $meses= array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
 //$fecha_fin=date('d-m-Y',time());
 $mes=date('m',time());
 $anio=date('Y',time());
 ?>
 <table style="width:200px;text-align:center;border:1px solid #808080;border-bottom:0px;" cellpadding="0" cellspacing="0">
 <tr>
 <td colspan="4">
 <select id="calendar_mes" onchange="update_calendar()">
 <?php
 $mes_numero=1;
 while($mes_numero<=12){
 if($mes_numero==$mes){
 echo "<option value=".$mes_numero." selected=\"selected\">".$meses[$mes_numero-1]."</option> \n";
 }else{
 echo "<option value=".$mes_numero.">".$meses[$mes_numero-1]."</option> \n";
 }
 $mes_numero++;
 }
 ?>
 </select>
 </td>
 <td colspan="3">
 <select style="width:70px;" id="calendar_anio" onchange="update_calendar()">
 <?php
 // años a mostrar
 $anio_min=$anio-30; //hace 30 años
 $anio_max=$anio; //año actual
 while($anio_min<=$anio_max){
 echo "<option value=".$anio_min.">".$anio_min."</option> \n";
 $anio_min++;
 }
 ?>
 </select>
 </td>
 </tr>
 </table>
 <div id="calendario_dias">
 <?php calendar($mes,$anio) ?>
 </div>
 <?php
}
function calendar($mes,$anio){
 $dia=1;
 if(strlen($mes)==1) $mes='0'.$mes;
 ?>
 <table style="width:200px;text-align:center;border:1px solid #808080;border-top:0px;" cellpadding="0" cellspacing="0">
 <tr style="background-color:#CCCCCC;">
 <td>D</td>
 <td>L</td>
 <td>M</td>
 <td>M</td>
 <td>J</td>
 <td>V</td>
 <td>S</td>
 </tr>
 <?php
 //echo $mes.$dia.$anio;
 $numero_primer_dia = date('w', mktime(0,0,0,$mes,$dia,$anio));
 $ultimo_dia=ultimoDia($mes,$anio);
 $total_dias=$numero_primer_dia+$ultimo_dia;
 $diames=1;
 //$j dias totales (dias que empieza a contarse el 1º + los dias del mes)
 $j=1;
 while($j<$total_dias){
 echo "<tr> \n";
 //$i contador dias por semana
 $i=0;
 while($i<7){
 if($j<=$numero_primer_dia){
 echo " <td></td> \n";
 }elseif($diames>$ultimo_dia){
 echo " <td></td> \n";
 }else{
 if($diames<10) $diames_con_cero='0'.$diames;
 else $diames_con_cero=$diames;
 echo " <td><a style=\"display:block;cursor:pointer;\" onclick=\"set_date('".$anio."-".$mes."-".$diames_con_cero."')\">".$diames."</a></td> \n";
 $diames++;
 }
 $i++;
 $j++;
 }
 echo "</tr> \n";
 }
 ?>
 </table>
 <?php
}
?>

Otro proceso importante lo encontramos en el archivo setvalues.php, este archivo sirve de puente para las llamadas AJAX, entre la funcion JavaScript que llamará al calendario y la función PHP que mostrará el calendario.

<?php
require('calendario.php');
$mes=$_GET['month'];
$anio=$_GET['year'];
$dia=1;
calendar($mes,$anio);
?>

Como se puede apreciar solo llama a la función calendar, osea la que se encarga de armar la tabla html con los días a mostrar según los parametros $mes y $anio. Pero … ¿de donde se obtiene estos valores?
Veamos las funciones JavaScript del archivo jquery.functions.js:

• update_calendar, obtiene los valores de los combo select mes y anio para capturar dichos valores y así realizar una petición al archivo setvalues.php contestando así la pregunta anterior.
• set_date, establece la fecha seleccionada en el text input deseado y oculta el calendario.
• show_calendar, muestra u oculta el calendario.

// funciones del calendario
$(document).ready(function(){
 //div donde se mostrará calendario debe estar oculto
 $('#calendario').hide();
});
function update_calendar(){
 var month = $('#calendar_mes').attr('value');
 var year = $('#calendar_anio').attr('value');
 var valores='month='+month+'&year='+year;
 $.ajax({
 url: 'setvalue.php',
 type: "GET",
 data: valores,
 success:function(datos){
 $("#calendario_dias").html(datos);
 }
 });
}
function set_date(date){
 //input text donde debe aparecer la fecha
 $('#fecha').attr('value',date);
 show_calendar();
}
function show_calendar(){
 //div donde se mostrará calendario
 $('#calendario').toggle();
}

Finalmente veamos su funcionamiento en este caso el archivo index.php

<title>Mini Calendario Web</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.functions.js"></script>
</head>
<body>
<form id="formulario">
 <p>
 <label for="fecha"> Selecciona la fecha
 <input type="text" name="fecha" id="fecha" /> <a onclick="show_calendar()" style="cursor: pointer;"><small>(calendario)</small></a>
 <div id="calendario">
 <?php calendar_html() ?>
 </div>
 </label>
 </p>
</form>
</body>

Como pueden apreciar:

• llamamos a los archivos JavaScript necesarios (incluyendo jQuery)
• incluimos un link llamando a la función show_calendar()
• también mostramos el calendario completo dentro del div id=”calendario”.

El resultado lo pueden ver aqui ó descargarlo. Espero les sea útil el código para que ustedes hagan sus modificaciones ó personalicen mejor.