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.
Como Twitter está de moda CatsWhoCode nos presenta 10 fragmentos de códigos, en diversos lenguajes de programación, para interactuar con este servicio.
