Agenda de citas por horas

[raulgranadosraul]

Hola a todos amigos del web.

Estoy haciendo una web de un centro de estética y he creado una agenda para guardar las citas de los clientes. Ahora mismo tengo una tabla de esta manera:

http://es.scribd.com/doc/214739153/Sin-titulo-2-pdf

Aqui lo que hago es mostrar la consulta ordenadas según la hora para que me muestre las citas del día consecutivamente.

Lo que necesito hacer es una especie de full calendar pero sin el rollo de mostrar por mes, semanas ni nada de eso. Solo necesito que al introducir el inicio y el fin de la cita me lo muestre en un cuadro entre esas dos horas. Algo como lo que está en la imagen pero solo con una columna que es la del día:

http://www.codfusion.com/blog/assets...tCalendar1.png

No consigo hacer una columna con las horas y que al agregar una cita me lo muestre como el ejemplo anterior.

Alguna idea de como lo puedo conseguir o algun tutorial que pueda seguir o algo???
No necesito todo un calendario, solamente saber como mostrar las citas entre las horas inicio y fin y que me deje los espacios de horas libres en blanco.

No os pongo código porque el que tengo es el de la primera imagen y de veras que llevo días y no consigo saber como hacerlo.

Si alguien puede echarme una mano muchas gracias.
Raúl

[liranan]

Buenas Raúl.

Imagino que estos datos los tienes en una base de datos. En ese caso en la tabla "citas" deberás tener un campo de "inicio_cita" y "fin_cita" con las horas de inicio y final de la cita.

Pongamos que la tabla es así:

citas
-------
id_cita
usuario
descripcion
dia
inicio_cita (va de la 1h a las 24h)
fin_cita (va de la 1h a las 24h)

En ese caso, haría algo así (la tabla te quedará con las horas en horizontal en vez de en vertical, eso si quieres ya miras cómo cambiarlo tú)

Código HTML:

<table>
<tr>
[PHP]<?php
for($i=1;$i<=24;$i++){ //Esto ya lo ajustas a las horas que quieras poner y con el formato que quieras
     echo "<th>".$i."</th>";
}
?>[/PHP]
</tr>
 

Código PHP:

  //Conexión a la base de datos 
$dia=date('d'); //Aquí podrías cambiar el día de hoy por el que quisieras 
$query='SELECT * FROM citas WHERE dia="'.$dia.'"; 
$select=@mysql_query($query); 
while($row=@mysql_fetch_array($select)){ 
     echo "<tr>"; 
          for($i=1;$i<=24;$i++){ 
               if($row['inicio_cita']<=$i && $row['fin_cita']>=$i){ 
                     echo "<td class='cita'>Cita</td>"; 
               }else{ 
                     echo "<td class='no-cita></td>"; 
               } 
          } 
     echo "</tr>"; 
}  
   

Código HTML:

</table>
 

Evidentemente el ejemplo es muy sencillo, pero creo que te sirve para lo que buscas. Luego ya lo puedes ir perfeccionando con formato de las horas, el texto que se muestra en la cita, etc.

Habría que poner en css la class "cita" con un color azul y la class "no-cita" con un color gris. Incluso podrías añadir lo de que el cuadro donde se inicie la cita aparezca más oscuro y con el texto, como en el ejemplo, añadiento otro "if"

Código HTML:

<table>
<tr>
[PHP]<?php
for($i=1;$i<=24;$i++){ //Esto ya lo ajustas a las horas que quieras poner y con el formato que quieras
     echo "<th>".$i."</th>";
}
?>[/PHP]
</tr>
 

Código PHP:

  //Conexión a la base de datos 
$dia=date('d'); //Aquí podrías cambiar el día de hoy por el que quisieras 
$query='SELECT * FROM citas WHERE dia="'.$dia.'"; 
$select=@mysql_query($query); 
while($row=@mysql_fetch_array($select)){ 
     echo "<tr>"; 
          for($i=1;$i<=24;$i++){ 
               if($row['inicio_cita']<=$i && $row['fin_cita']>=$i){ 
                     if($row['inicio_cita']==$i){ 
                           echo "<td class='inicio-cita'>".$row['descripcion']."</td>"; 
                     }else{ 
                           echo "<td class='cita'></td>"; 
                     } 
               }else{ 
                     echo "<td class='no-cita></td>"; 
               } 
          } 
     echo "</tr>"; 
}  
   

Código HTML:

</table>