Ver Mensaje Individual
  #5 (permalink)  
Antiguo 19/03/2016, 15:06
Avatar de xfxstudios
xfxstudios
 
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 10 meses
Puntos: 263
Respuesta: Vista de datos de una base de datos en calendario semanal

y no es mas facil utilizar por ejemplo full calendar, cargas la info en un json y listo, los va a mostrar en los días que corresponda y es fácil de configurar para que se muestre solo en modo semanal, de todas formas, si aun quieres seguir con esta forma, prueba esto.

Código HTML:
Ver original
  1. <table border="1" style="width:100%" id="tabla">
  2.   <tr>
  3.     <th>HORA</th>
  4.     <th>Lunes</th>
  5.     <th>Martes</th>
  6.     <th>Miercoles</th>
  7.     <th>Jueves</th>
  8.     <th>Viernes</th>
  9.     <th>Sábado</th>
  10.     <th>Domingo</th>
  11.   </tr>
  12.   <tr>
  13.     <td>09:00</td>
  14.     <td id="09lun"></td>
  15.     <td id="09mar"></td>
  16.     <td id="09mie"></td>
  17.     <td id="09jue"></td>
  18.     <td id="09vie"></td>
  19.     <td id="09sab"></td>
  20.     <td id="09dom"></td>
  21.   </tr>
  22.   <tr>
  23.     <td>09:30</td>
  24.     <td id="093lun"></td>
  25.     <td id="093mar"></td>
  26.     <td id="093mie"></td>
  27.     <td id="093jue"></td>
  28.     <td id="093vie"></td>
  29.     <td id="093sab"></td>
  30.     <td id="093dom"></td>
  31.   </tr>
  32.   <tr>
  33.     <td>10:00</td>
  34.     <td id="10lun"></td>
  35.     <td id="10mar"></td>
  36.     <td id="10mie"></td>
  37.     <td id="10jue"></td>
  38.     <td id="10vie"></td>
  39.     <td id="10sab"></td>
  40.     <td id="10dom"></td>
  41.   </tr>

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.  
  3.     veri();
  4.  
  5. });
  6.  
  7.  
  8. function veri(){
  9.  
  10. //fechas reservadas
  11. var ar = ["09lun","10lun","093mar","10mie"];
  12.  
  13. //iniciamos un contador
  14. var con = 0;
  15.  
  16. //recorremos la tabla
  17. $('#tabla tr').find('td').each(function (i, v) {
  18.  
  19. //asignamos a una variable la id de cada td de la tabla
  20. var ref = ($('#tabla tr').find('td')[con].id);
  21.  
  22.     //verificamos si esa id esta en el array
  23.     if( $.inArray(ref,ar) > -1 ){
  24.  
  25.         //Si lo esta, le asignamos una clase    
  26.     $("td[id="+ref+"]").addClass('listo');
  27.     $("td[id="+ref+"]").html("Reservado");
  28.  
  29.   }
  30.  
  31. //incrementamos el contador
  32. con = parseInt(con)+1;
  33.  
  34. });
  35.  
  36.  
  37.  
  38. }

Código CSS:
Ver original
  1. .listo{
  2.     background-color:#FF6E00;
  3.   color:#fff;
  4.   text-align:center;
  5. }

MUESTRA: https://jsfiddle.net/xfxstudios/mr07sygz/2/

Ya determinaras tu como asignas la id a los campos basado en la fecha del día. Saludos
__________________
[email protected]
HITCEL

Última edición por xfxstudios; 19/03/2016 a las 16:47 Razón: Agregado bootstrap al ejemplo y Font Awesome