Calendario Para Reservas.

HackID1 · #1 (**permalink**) 05/12/2014, 08:07

Hola Foreros. Hoy vengo con una problema que me resulta bastante complicado, mas de lo que pensaba.

Me gustaría añadir en una parte de mi web un calendario el cual se pueda navegar por el y elegir el día en el que se quiera hacer la reserva.

He visto este post anterior pero en sí no veo respuesta para poder solucionar este problema.
llamando_consulta_sql_desde_calendario_eventos

He visto este CALENDARIO y es justo lo que me haría falta, solo le faltaría la reseña cuando te posicionas encima con el ratón por JScript.
Calendario_perfecto

El calendario se mostraría en la web y debe permitir que elijas un día y situando el ratón encima ver que es lo que se ha reservado ese día.

Si el día que escoges no tiene nada reservado que te lleve a un formulario, aquí rellenas los datos de reserva, y aceptas con lo que ya se reserva ese día y hora para ti.

Si vuelves al calendario debe aparecer ese día reservado!!!. Y situandose encima con el ratón (supongo que es JScript) mostrar una pequeña ficha de lo que se ha reservado.

Esto debe controlarse con JScript, PHP y BD (para tener control de las reservas y quien la ha reservado).

Estuve mirando varios calendarios y encontré este pero veo montón de información que para el poco tiempo que dispongo no me daría tiempo a conocer como implementar en JQuery este calendario.

Calendario:
http://fullcalendar.io/

Algunas formas de uso:
http://fullcalendar.io/docs/usage/

Es bastante amplia la info, podrían darme una idea.

Simplemente quisiera mostrar un calendario, permitir elegir un día y este lleve al formulario, rellenar los datos y hacer la reserva. Posteriormente volver al calendario y si hay días ocupados que se vean en NEGRO y posiciones encima el ratón y te muestre una pequeña reseña. (titulo, descrip corta y foto por ejemplo).

Saludos y muchas gracias si alguien puede guiarme para realizar este calendario.

NSD · #2 (**permalink**) 05/12/2014, 12:09

Podrias hacer algo desde 0, vamos que tampoco es tan dificil.

Por ejemplo:

calendario.js

Código Javascript:

Ver originalvar eventos = document.getElementsByClassName("evento"); 
for(var evt = 0; evt<eventos.length; evt++)
{
    eventos[evt].addEventListener("click", function(){
        var lista = document.getElementsByTagName("li"); 
        for(var li = 0; li<lista.length; li++)
            lista[li].classList.remove("active");
        document.getElementById("evnt_"+this.dataset.fecha).classList.add("active");
    }, false); 
}

calendario.css

Código CSS:

Ver originaltable
{   
    width: 400px;
    float: left;
}
td
{
    padding: 10px;
    border: 1px solid #eee;
    text-align: center;
}
td.evento
{
    background: #eee;
}
td.evento.reserva
{
    border-color: red;
}
ul
{
    width: 400px;
    float: left;
}
ul > li
{
    display: none;
}
ul > li.active
{
    display: block !important;
}
ul > li > img
{
    float: left;
    width: 200px;
}

calendario.php

Código PHP:

Ver original<?php
    $mes_a_mostrar = "2014-12";
 
    // Esto lo obtines de una bd.
    $eventos_mes = [
        "2014-12-05" => [
            "titulo" => "Responder un tema",
            "lugar"  => "Foros del web",
            "imagen" => "http://www.maestrosdelweb.com/images/2008/11/isotipofdw_hr.png",
            "descripcion" => "Ejemplo de datos de calendario."
        ],
        "2014-12-15" => [
            "titulo" => "Responder otro tema",
            "lugar"  => "Foros del web",
            "imagen" => "http://www.maestrosdelweb.com/images/2008/11/isotipofdw_hr.png",
            "descripcion" => "Ejemplo de datos de otro calendario."
        ]
    ];
 
    $reservas_mes = [
        "2014-12-15" => [
            [
                "nombre" => "Persona 1",
                "butaca"  => 1
            ],
            [
                "nombre" => "Persona 2",
                "butaca"  => 2
            ]
        ]
    ];
?>
<html>
    <head>
        <title>Calendario</title>
       <link rel="stylesheet" type="text/css" href="calendario.css">
    </head>
    <body>
        <table>
            <tr>
                <th colspan="7"><?=$mes_a_mostrar;?></th>
            </tr>
            <tr>
                <th>Domingo</th>
                <th>Lunes</th>
                <th>Martes</th>
                <th>Miercoles</th>
                <th>Jueves</th>
                <th>Viernes</th>
                <th>Sabado</th>
            </tr>
            <tr>
            <?php
                $inicio = date('w', strtotime($mes_a_mostrar."-01"));
                $dias = cal_days_in_month(CAL_GREGORIAN, 12, 2014);
                echo str_repeat("<td></td>", $inicio);
                for($dia = $inicio; $dia<$dias; $dia++)
                {
                    if(!(($dia)%7))
                        echo("</tr><tr>");
                    $dia = ($dia < 10 ? "0$dia" : $dia);
                    $class = (isset($eventos_mes["$mes_a_mostrar-$dia"]) ? "evento" : "");
                    $class .= (isset($reservas_mes["$mes_a_mostrar-$dia"]) ? " reserva" : "");
 
                    echo("<td class=\"$class\" data-fecha=\"$mes_a_mostrar-$dia\">".($dia*1)."</td>");
                }
            ?>
            </tr>
        </table>
        <ul>
            <?php
                foreach($eventos_mes as $fecha => $evento)
                {
            ?>
            <li id="evnt_<?=$fecha;?>">
                <img src="<?=$evento["imagen"];?>">
                <strong><?=$fecha;?></strong>
                <h3><?=$evento["titulo"];?></h3>
                <h5><?=$evento["lugar"];?></h5>
                <p><?=$evento["descripcion"];?></p>
                <?php
                    if(isset($reservas_mes[$fecha]))
                    {
                ?>
                    <table>
                        <tr>
                            <th>Persona</th>
                            <th>Butaca</th>
                        </tr>
                    <?php
                        foreach($reservas_mes[$fecha] as $reserva)
                        {
                    ?>
                        <tr>
                            <td><?=$reserva["nombre"];?></td>
                            <td><?=$reserva["butaca"];?></td>
                        </tr>
                    <?php
                        }
                    ?>
                    </table>
                <?php
                    }
                ?>
            </li>
            <?php
                }
            ?>
        </ul>
        <script src="calendario.js"></script>
    </body>
</html>

Solo te queda agregar el formulario y hacerlo funcionar.

HackID1 · #3 (**permalink**) 06/12/2014, 08:21

Y cómo podría hacer para en ese mismo calendario mostrar unas flechas de navegación para tener todos los meses, es decir un calendario completo meses y años.

Gracias por la ayuda!!!. estoy ahora probando cosas, pero si me haría mucha falta tener todos los meses, podría ser en un array o algo.

NSD · #4 (**permalink**) 06/12/2014, 11:55

Cita:

podría ser en un array o algo.

Podrían ser muchas cosas. Ya te di una idea, solo tienes que adaptarla a tus necesidades.

HackID1 · #5 (**permalink**) 12/12/2014, 16:44

Muchas gracias por las respuestas, actualmente estoy realizando todo usando un calendario creando este por medio de Ajax y PHP. Por ahora todo funcionando, sólo me queda permitir registrar el mismo evento en un rango de días.

Ejm: En el calendario selecciono el día 2, creo el evento y elijo la opción para ampliar ese evento desde el día 2 hasta el 4.

Por tanto el evento saldrá en los días 2, 3 y 4 .

Alguna idea de como realizar esta opción así por encima?
Saludos y muchas gracias a este foro siempre me es de muchísima ayuda y intento devolver estos grandes favores lo mejor que puedo. ;)