Tema: Calendario Para Reservas.
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/12/2014, 12:09
Avatar de NSD
NSD
Colaborador
  
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 12 años, 9 meses
Puntos: 320
Respuesta: Calendario Para Reservas.
Podrias hacer algo desde 0, vamos que tampoco es tan dificil.

Por ejemplo:

calendario.js
Código Javascript: 
Ver original
  1. var eventos = document.getElementsByClassName("evento"); 
  2. for(var evt = 0; evt<eventos.length; evt++)
  3. {
  4.     eventos[evt].addEventListener("click", function(){
  5.         var lista = document.getElementsByTagName("li"); 
  6.         for(var li = 0; li<lista.length; li++)
  7.             lista[li].classList.remove("active");
  8.         document.getElementById("evnt_"+this.dataset.fecha).classList.add("active");
  9.     }, false); 
  10. }

calendario.css
Código CSS: 
Ver original
  1. table
  2. {   
  3.     width: 400px;
  4.     float: left;
  5. }
  6. td
  7. {
  8.     padding: 10px;
  9.     border: 1px solid #eee;
  10.     text-align: center;
  11. }
  12. td.evento
  13. {
  14.     background: #eee;
  15. }
  16. td.evento.reserva
  17. {
  18.     border-color: red;
  19. }
  20. ul
  21. {
  22.     width: 400px;
  23.     float: left;
  24. }
  25. ul > li
  26. {
  27.     display: none;
  28. }
  29. ul > li.active
  30. {
  31.     display: block !important;
  32. }
  33. ul > li > img
  34. {
  35.     float: left;
  36.     width: 200px;
  37. }

calendario.php
Código PHP: 
Ver original
  1. <?php
  2.     $mes_a_mostrar = "2014-12";
  3.  
  4.     // Esto lo obtines de una bd.
  5.     $eventos_mes = [
  6.         "2014-12-05" => [
  7.             "titulo" => "Responder un tema",
  8.             "lugar"  => "Foros del web",
  9.             "imagen" => "http://www.maestrosdelweb.com/images/2008/11/isotipofdw_hr.png",
  10.             "descripcion" => "Ejemplo de datos de calendario."
  11.         ],
  12.         "2014-12-15" => [
  13.             "titulo" => "Responder otro tema",
  14.             "lugar"  => "Foros del web",
  15.             "imagen" => "http://www.maestrosdelweb.com/images/2008/11/isotipofdw_hr.png",
  16.             "descripcion" => "Ejemplo de datos de otro calendario."
  17.         ]
  18.     ];
  19.  
  20.     $reservas_mes = [
  21.         "2014-12-15" => [
  22.             [
  23.                 "nombre" => "Persona 1",
  24.                 "butaca"  => 1
  25.             ],
  26.             [
  27.                 "nombre" => "Persona 2",
  28.                 "butaca"  => 2
  29.             ]
  30.         ]
  31.     ];
  32. ?>
  33. <html>
  34.     <head>
  35.         <title>Calendario</title>
  36.        <link rel="stylesheet" type="text/css" href="calendario.css">
  37.     </head>
  38.     <body>
  39.         <table>
  40.             <tr>
  41.                 <th colspan="7"><?=$mes_a_mostrar;?></th>
  42.             </tr>
  43.             <tr>
  44.                 <th>Domingo</th>
  45.                 <th>Lunes</th>
  46.                 <th>Martes</th>
  47.                 <th>Miercoles</th>
  48.                 <th>Jueves</th>
  49.                 <th>Viernes</th>
  50.                 <th>Sabado</th>
  51.             </tr>
  52.             <tr>
  53.             <?php
  54.                 $inicio = date('w', strtotime($mes_a_mostrar."-01"));
  55.                 $dias = cal_days_in_month(CAL_GREGORIAN, 12, 2014);
  56.                 echo str_repeat("<td></td>", $inicio);
  57.                 for($dia = $inicio; $dia<$dias; $dia++)
  58.                 {
  59.                     if(!(($dia)%7))
  60.                         echo("</tr><tr>");
  61.                     $dia = ($dia < 10 ? "0$dia" : $dia);
  62.                     $class = (isset($eventos_mes["$mes_a_mostrar-$dia"]) ? "evento" : "");
  63.                     $class .= (isset($reservas_mes["$mes_a_mostrar-$dia"]) ? " reserva" : "");
  64.  
  65.                     echo("<td class=\"$class\" data-fecha=\"$mes_a_mostrar-$dia\">".($dia*1)."</td>");
  66.                 }
  67.             ?>
  68.             </tr>
  69.         </table>
  70.         <ul>
  71.             <?php
  72.                 foreach($eventos_mes as $fecha => $evento)
  73.                 {
  74.             ?>
  75.             <li id="evnt_<?=$fecha;?>">
  76.                 <img src="<?=$evento["imagen"];?>">
  77.                 <strong><?=$fecha;?></strong>
  78.                 <h3><?=$evento["titulo"];?></h3>
  79.                 <h5><?=$evento["lugar"];?></h5>
  80.                 <p><?=$evento["descripcion"];?></p>
  81.                 <?php
  82.                     if(isset($reservas_mes[$fecha]))
  83.                     {
  84.                 ?>
  85.                     <table>
  86.                         <tr>
  87.                             <th>Persona</th>
  88.                             <th>Butaca</th>
  89.                         </tr>
  90.                     <?php
  91.                         foreach($reservas_mes[$fecha] as $reserva)
  92.                         {
  93.                     ?>
  94.                         <tr>
  95.                             <td><?=$reserva["nombre"];?></td>
  96.                             <td><?=$reserva["butaca"];?></td>
  97.                         </tr>
  98.                     <?php
  99.                         }
  100.                     ?>
  101.                     </table>
  102.                 <?php
  103.                     }
  104.                 ?>
  105.             </li>
  106.             <?php
  107.                 }
  108.             ?>
  109.         </ul>
  110.         <script src="calendario.js"></script>
  111.     </body>
  112. </html>

Solo te queda agregar el formulario y hacerlo funcionar.
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios
Última edición por NSD; 06/12/2014 a las 11:53