RibosoMatic Blog

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.