domingo, 11 de marzo de 2012

Marcar el día actual en el mensil

En esta entrada veremos qué modificaciones y agregados hay que hacer sobre el código de la versión 0.2 de index.php para que el mensil que se genera tenga resaltado, de alguna forma, el día que se está mostrando en la página.
Primero, si revisamos la entrada anterior, podemos ver cuáles son las líneas de ese código, que generan todos y cada uno de los días del mes en la tabla del mensil:
  • la línea 25 de la versión 0.2 de index.php imprime los días de la primera semana (en la explicación de la entrada anterior, está numerada como línea 10):
    • {echo "<td>".$a."</td>";}
  • y la línea 31, el resto (en la explicación de la entrada anterior, está numerada como línea 16):
    • echo "<td>".$i."</td>";
El primer cambio es agregar a la celda de la tabla con el número de día que coincida con el del día seleccionado (date("d",$_GET['fechaactual'])) una clase que llamaré diadelafecha.
De esta forma, la línea 25 será sustituida por:
  • { if ($a==date("d",$_GET['fechaactual']))
          { echo "<td class='diadelafecha'>".$a."</td>"; }
    else {
    echo "<td>".$a."</td>"; }
    }
Y la línea 31, por:
  • if ($i==date("d",$_GET['fechaactual']))
          { echo "<td class='diadelafecha'>".$i."</td>"; }
    else {
    echo "<td>".$i."</td>"; }
O sea, que le aplicará la clase diadelafecha solo a la celda que contenga un número igual al día que se está mostrando en la página.
Evidentemente, con sólo estos agregados, aún no se ve ningún cambio, si se ejecuta el script.

El segundo paso es adosarle una hoja de estilos (CSS) externa a index.php.
Para ello se debe agregar la siguiente línea:
<link href="estiloclcphp.css" rel="stylesheet" type="text/css"> en la sección head, o sea podría ser después de la etiqueta <title> de la línea 3.

Tampoco ahora vemos cambios al ejecutar el script, ya que en el primer paso de esta entrada le aplicamos una clase a una de las celdas de la tabla y en el segundo, le adosamos una hoja de estilos que va a definir como se tiene que comportar esa clase. Pero falta escribir la hoja de estilos propiamente dicha.
Para ello, en el mismo lugar que está guardado el archivo index.php hay que crear y guardar un documento de texto plano con el nombre estiloclcphp.css.
De momento, y a modo de prueba, el contenido de ese archivo podría ser:

td.diadelafecha { border: 1px solid #000; }

Lo que se logra con esta hoja de estilos es que todas las celdas (td) que tengan aplicada la clase diadelafecha, tengan un borde sólido de 1 pixel de grosor y de color negro (border: 1px solid #000).

Y ahora sí se ve el resultado. Al ejecutar el script, el día seleccionado en la página se ve en el mensil con un recuadro negro.
Por ejemplo, al ejecutar el script en el día de ayer, el resultado era:



En definitiva, con los cambios ingresados en esta entrada, el código de index.php queda así:
<!DOCTYPE html>
<head>
<title>CLCPHP - Calandario Lit&uacute;rgio Cat&oacute;lico En PHP</title>
<link href="estiloclcphp.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
include("funciones.php");
if(!isset($_GET['fechaactual'])) {
$_GET['fechaactual']=time();}
$ayer=mktime(0,0,0,date("m",$_GET['fechaactual']), date("d",$_GET['fechaactual'])-1,date("Y",$_GET['fechaactual']));
$manana=mktime(0,0,0,date("m",$_GET['fechaactual']), date("d",$_GET['fechaactual'])+1,date("Y",$_GET['fechaactual']));
echo "<h3>".traducir(date('l j \d\e F \d\e Y',$_GET['fechaactual']))."</h3>\n";
echo "<a href='index.php?fechaactual=".$ayer."'>&lt;&lt; D&iacute;a anterior</a> | ";
echo "<a href='index.php?fechaactual=".$manana."'>D&iacute;a posterior &gt;&gt;</a>";
echo "\n<table>\n";
echo "<tr><th colspan='7'>".ucfirst(traducir(date('F \d\e Y',$_GET['fechaactual'])))."</th></tr>\n";
echo "<tr><th>Do</th><th>Lu</th><th>Ma</th><th>Mi</th><th>Ju</th><th>Vi</th><th>Sa</th></tr>\n";
echo "<tr>";
$primerDiaMes=mktime(0,0,0,date("m",$_GET['fechaactual']), '1',date("Y",$_GET['fechaactual']));
for  ($i=1;$i<=date('w',$primerDiaMes);$i++)
 { echo "<td></td>"; }
$restoPrimeraSemana=8-$i;
for ($a=1;$a<=$restoPrimeraSemana;$a++)
  { if ($a== date("d",$_GET['fechaactual']))
      { echo "<td class='diadelafecha'>".$a."</td>"; }
    else { echo "<td>".$a."</td>"; }
   }
echo "</tr>\n<tr>";
$diasDelMes=date('t',$primerDiaMes);
$i=($i*-1) + 9;
$y=1;
for ($i;$i<=$diasDelMes;$i++)
 { if ($i==date("d",$_GET['fechaactual']))
      { echo "<td class='diadelafecha'>".$i."</td>"; }
   else { echo "<td>".$i."</td>"; }
  if (($y%7=="0") && ($i==$diasDelMes)) { }
  elseif (($y%7=="0") && ($i<$diasDelMes)) { echo "</tr>\n<tr>"; }
  $y++; 
  }
$y--;
$i--;
if (($y%7!="0") && ($i==$diasDelMes)) {
   $ultimoDiaMes=mktime(0,0,0,date("m",$_GET['fechaactual']), $diasDelMes,date("Y",$_GET['fechaactual']));
   $restoUltimaSemana= (date('w',$ultimoDiaMes) * -1) + 6;
   for  ($i=1;$i<=$restoUltimaSemana;$i++)
  { echo "<td></td>"; }
   }
echo "</tr>\n";
echo "</table>\n";
?>
</body>
</html>

No hay comentarios:

Publicar un comentario

Gracias por el comentario.
Luego de ser sometido a moderación y si amerita, será publicado.