Vista de datos de una base de datos en calendario semanal

[kip13]

Hola a todos, necesito de gran ayuda en un proyecto personal que estoy realizando, intento hacer una web que me muestre en un calendario semanal con las horas(como un horario o itinerario) de cada dia de la semana (valga la redundancia). Tengo una base de datos con los datos: id, nombre, telf, correo, fecha, horainicio, horasalida.
La verdad es que tengo lios porque he estado pensando en mejor colocar solo un campo de me almacene la fecha y la hora pero lo pienso y no sabria como mostrarlo en un calendario. He estado revisando mucho y he encontrado ciertos scripts y otras cosas que en realidad no me han ayudado aunque si me han guiado un poco a hacerme una idea algo basica de como podria mostrarlo.
Espero me haya hecho entender, muchas gracias desde ya, saludos.
El sistema que realizo es como uno de reserva a un estudio musical.

[rodocoyote15]

Puedes apoyarte de FullCalendar, está muy completo y puedes cargar tus eventos, y personalizarlo a tu gusto.
Lo más fácil es crear una tabla con los datos que almacenas, pero un calendario creo que estaría mejor.

Si lo quieres hacer desde 0, tienes que hacer mucho más trabajo. Saludos

[kip13]

Iniciado por rodocoyote15

Puedes apoyarte de FullCalendar, está muy completo y puedes cargar tus eventos, y personalizarlo a tu gusto.
Lo más fácil es crear una tabla con los datos que almacenas, pero un calendario creo que estaría mejor.

Si lo quieres hacer desde 0, tienes que hacer mucho más trabajo. Saludos

Claro, he visto las funciones y en realidad no se ajustan a lo que quiero, quiero algo mas sencillo, un simple calendario semanal que me muestre todas las horas en una columna y los dias de la semana actual en otras.
Algo como esto pero con ciertas horas mas:



Las horas serian estaticas propias de la tabla y las fechas serian las de la semana actual pero, si en la base de datos que tengo hay un dato con la fecha y hora de la tabla pues me lo mostraria de alguna forma, ya sea con un mensaje que diga 'RESERVD' o algo parecido.

Entonces es como dices

Iniciado por rodocoyote15

Lo más fácil es crear una tabla con los datos que almacenas, pero un calendario creo que estaría mejor.

lo mejor es crear una tabla pero no sabria como adaptarla a mi gusto, por cuestion de fecha y horas.

Solo me gustaria saber como mostrar aquello, espero me ayuden.

Gracias!

PD: EN ESTE CALENDARIO SOLO QUIERO MOSTRAR LOS DATOS, NADA MAS, NO QUIERO EDITARLOS.

[kip13]

Por favor, alguien podria ayudarme.
Si desean info de las tabblas que cree diganme, si eso facilita no es problema para mi

GRACIAS!!

[xfxstudios]

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:

<table border="1" style="width:100%" id="tabla">
  <tr>
    <th>HORA</th>
    <th>Lunes</th>
    <th>Martes</th>
    <th>Miercoles</th>
    <th>Jueves</th>
    <th>Viernes</th>
    <th>Sábado</th>
    <th>Domingo</th>
  </tr>
  <tr>
    <td>09:00</td>
    <td id="09lun"></td>
    <td id="09mar"></td>
    <td id="09mie"></td>
    <td id="09jue"></td>
    <td id="09vie"></td>
    <td id="09sab"></td>
    <td id="09dom"></td>
  </tr>
  <tr>
    <td>09:30</td>
    <td id="093lun"></td>
    <td id="093mar"></td>
    <td id="093mie"></td>
    <td id="093jue"></td>
    <td id="093vie"></td>
    <td id="093sab"></td>
    <td id="093dom"></td>
  </tr>
  <tr>
    <td>10:00</td>
    <td id="10lun"></td>
    <td id="10mar"></td>
    <td id="10mie"></td>
    <td id="10jue"></td>
    <td id="10vie"></td>
    <td id="10sab"></td>
    <td id="10dom"></td>
  </tr>
</table>
 

Código Javascript:

$(document).ready(function(){
 
    veri();
 
});
 
 
function veri(){
 
//fechas reservadas
var ar = ["09lun","10lun","093mar","10mie"];
 
//iniciamos un contador
var con = 0;
 
//recorremos la tabla
$('#tabla tr').find('td').each(function (i, v) {
 
//asignamos a una variable la id de cada td de la tabla
var ref = ($('#tabla tr').find('td')[con].id);
 
    //verificamos si esa id esta en el array
    if( $.inArray(ref,ar) > -1 ){
  
        //Si lo esta, le asignamos una clase    
    $("td[id="+ref+"]").addClass('listo');
    $("td[id="+ref+"]").html("Reservado");
  
  }
 
//incrementamos el contador
con = parseInt(con)+1;
 
});
 
  
 
}
 

Código CSS:

.listo{
    background-color:#FF6E00;
  color:#fff;
  text-align:center;
}
 

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

[kip13]

Muchisimas gracias por aquel codigo que posteaste, esta muy bueno, se asemeja mucho a lo que me imaginaba.

Sabes no uso FULLCalendar porque una caracteristica que no me gusta "drag-n-drop " en realidad lo que yo busco es algo como lo que hiciste, mostrar solo si esta o no reservado en aquella fecha en la tabla que sirve como calendario semanal.

La verdad es que no soy experto en JavaScript, aunque entiendo como funciona el codigo de js que posteaste, indagare como obtener datos de la BASE DE DATOS, verificar que tenga la hora adecuada y asi saber si aquella hora esta reservada o no.
Lo que me queda en duda es como hacer la comparacion de los datos y colocarlos en las celdas correspondientes de la tabla, por ejemplo si la fecha actual es 2016-03-19, deberia mostrarme la semana de esta y todo aquello.

Voy a probar expresando la fecha del registro en número del día de la semana (domingo: 7, lunes: 1, etc.) y luego hacer la comparacion con los dias de la tabla y asi colocarlos en el lugar que corresponden, con las horas quizas haga lo mismo, aunque estoy algo perdido de como lo hare y no se cuanto me lie hasta logralo.

Si alguien me entiende y me ayuda a agilzar las cosas un poco con algo de guia o alguna ayuda, no estaria mal y les quedaria muy agradecidos.

Espero se entienda mi disparatda idea.

Gracias desde yaaa, SALUDOS!

[kip13]

Hola a todos, parece que he resuelto el tema de mostrar los dias de la semana actual, me he ayudado mucho con un tema creado por un usuario que tenia algo parecido a lo que yo queria y gracias tambien a xfxstudios que me ayudo con un buen codigo para guiarme e indagar mas.

Este es el codigo que tengo hasta ahora:

Código PHP:

  <?php  
//verificacion de semana actual 
   $ul =  $ul = strtotime("week", time());; 
  $ul = strtotime('last monday'); 
 
//dias de la semana arreglo 
$meses = array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); 
$dias_semana = array('Lunes', 'Martes','Miercoles', 'Jueves', 'Viernes', 'Sabado', 'Domingo'); 
 
?> 
 
<table border="1" id="tabla_diashoras" align="center" > 
  <thead >  
  <tr> 
     <?php       
         $mes_act=date("n", $ul); 
          echo '<th colspan="8">'.$meses[$mes_act - 1].'</th> '; 
      ?> 
  </tr> 
  <tr> 
  <th>HORAS</th> 
       <?php 
          for($i=0;$i<7;$i++){ 
          //Sumamos días a la fecha del lunes actual 
          $sd = strtotime("+$i day", $ul); 
     
          //comprobamos si la fecha del bucle es la fecha actual 
          if(date('Y-m-d', $sd) === date('Y-m-d')) { 
            //colocamos el dia actual en rojo y ponemos el array para mostrar los dias en español 
          echo '<th bgcolor="#FF6600" align="center" nowrap >'.$dias_semana[$i].' '.date("d", $sd).'</th> '; 
          } else { 
           //colocamos el el resto de los dias en gris y ponemos el array para mostrar los dias en español 
          echo '<th font color="gray" align="center" nowrap>'.$dias_semana[$i].' '.date("d", $sd).'</th> '; 
          } 
          } 
        ?> 
  </tr> 
  </thead> 
 
</table>  

Este es el resultado del codigo:



Este es el link al tema del que me ayude mucho.
http://www.forosdelweb.com/f18/despl...16/index2.html

Ahora que tengo aquello me gustaria otra ayuda.

Quisiera agregar algo para poder cambiar de semana o de mes, tal vez tambien seleccionar algun dia especifico del año (no es tan necesario).

He pensado en agregar un campo de texto con datepicker y de alli se seleccione la fecha pero creo que es algo muy redundante, aquello lo utilizare para almacenar fechas en la base de datos que tengo.

He pensado tambien en la variable de semana que tengo suarle un uno para que asi de la semana actual vaya a la siguiente, pero estoy algo perdido.

Espero me hayan entendido y puedan ayudarme.

Gracias desde ya y SALUDOS!

[rodocoyote15]

Amigo te estás complicando demasiado. Al cliente le encantará el aspecto que tiene fullcalendar y no esa tabla obsoleta, y te llevará más tiempo del que crees .. Todo lo que dices lo tiene ese plugin, si lees su documentación, podrás ver que todas sus opciones (incluido el drag&drop) pueden ser habilitadas/deshabilitadas. En el tiempo que estuviste haciendo esto, ya hubieras terminado lo otro. Mi consejo, saludos.

[kip13]

Voy a probar con el fullcalendar, les aviso como me va.
En realidad queria crear algo por mi cuenta, ya que tengo algo de tiempo pero, al parecer tienes razon.

Saludos