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.