Llamando una consulta SQL desde calendario de eventos

dark_17 · #1 (**permalink**) 10/12/2012, 14:32

Saludos, me han pedido un calendario de eventos tipo Google Calendar en el que se vean las reservas, de cada cliente de que fecha a que fecha se hospedaran. Estoy usando un plugin llamado FullCalendar, este es el plugin:

http://arshaw.com/fullcalendar/

como ven ya tengo el calendario pero ahora lo que quiero es que los eventos me los llame de una consulta hacia mi base de datos mysql, y no desde un javascript, le ponde el codigo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' /> 
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' /> 
<script type='text/javascript' src='../jquery/jquery-1.8.1.min.js'></script> 
<script type='text/javascript' src='../jquery/jquery-ui-1.8.23.custom.min.js'></script> 
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script> 
<script type='text/javascript'> 
 
    $(document).ready(function() { 
     
        var date = new Date(); 
        var d = date.getDate(); 
        var m = date.getMonth(); 
        var y = date.getFullYear(); 
         
        $('#calendar').fullCalendar({ 
            editable: false, 
            events: [ 
                { 
                    title: 'All Day Event', 
                    start: new Date(y, m, 1) 
                }, 
                { 
                    title: 'Long Event', 
                    start: new Date(y, m, d-5), 
                    end: new Date(y, m, d-2) 
                }, 
                { 
                    id: 999, 
                    title: 'Repeating Event', 
                    start: new Date(y, m, d-3, 16, 0), 
                    allDay: false 
                }, 
                { 
                    id: 999, 
                    title: 'Repeating Event', 
                    start: new Date(y, m, d+4, 16, 0), 
                    allDay: false 
                }, 
                { 
                    title: 'Lunch', 
                    start: new Date(y, m, d, 12, 0), 
                    end: new Date(y, m, d, 14, 0), 
                    allDay: false 
                }, 
                { 
                    title: 'Birthday Party', 
                    start: new Date(y, m, d+1, 19, 0), 
                    end: new Date(y, m, d+1, 22, 30), 
                    allDay: false 
                }, 
                { 
                    title: 'Click for Google', 
                    start: new Date(y, m, 28), 
                    end: new Date(y, m, 29), 
                    url: 'http://google.com/' 
                } 
            ] 
        }); 
         
    }); 
 
</script> 
<style type='text/css'> 
 
    body { 
        margin-top: 40px; 
        text-align: center; 
        font-size: 14px; 
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
        } 
 
    #calendar { 
        width: 900px; 
        margin: 0 auto; 
        } 
 
</style> 
</head> 
<body> 
<div id='calendar'> 
</div> 
</body> 
</html>

Como ven ahi me muestra los eventos en javascript, pero yo quiero que me genere los eventos desde una consulta hacia la bd.
Aqui hay un ejemplo en el que toman los eventos desde un feed, quizas este mas cerca a lo que deseo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' /> 
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' /> 
<script type='text/javascript' src='../jquery/jquery-1.8.1.min.js'></script> 
<script type='text/javascript' src='../jquery/jquery-ui-1.8.23.custom.min.js'></script> 
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script> 
<script type='text/javascript' src='../fullcalendar/gcal.js'></script> 
<script type='text/javascript'> 
 
    $(document).ready(function() { 
     
        $('#calendar').fullCalendar({ 
         
            // US Holidays 
            events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic', 
             
            eventClick: function(event) { 
                // opens events in a popup window 
                window.open(event.url, 'gcalevent', 'width=700,height=600'); 
                return false; 
            }, 
             
            loading: function(bool) { 
                if (bool) { 
                    $('#loading').show(); 
                }else{ 
                    $('#loading').hide(); 
                } 
            } 
             
        }); 
         
    }); 
 
</script> 
<style type='text/css'> 
 
    body { 
        margin-top: 40px; 
        text-align: center; 
        font-size: 14px; 
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
        } 
         
    #loading { 
        position: absolute; 
        top: 5px; 
        right: 5px; 
        } 
 
    #calendar { 
        width: 900px; 
        margin: 0 auto; 
        } 
 
</style> 
</head> 
<body> 
<div id='loading' style='display:none'>loading...</div> 
<div id='calendar'></div> 
</body> 
</html>

pero repito yo quiero que me genere los eventos desde una consulta a mi BD
Gracias de antemano por sus colaboraciones. Saludos

David · #2 (**permalink**) 10/12/2012, 15:27

Lo que necesitas hacer no es hacer la consulta SQL desde el calendario (lo digo por el título), ya que el calendario es Javascript, que se ejecuta del lado del cliente.

Lo que tienes que hacer es realizar la consulta en PHP, y luego imprimir el resultado en la configuración de tu calendario. Por ponerte en ejemplo, si tuviera los datos en un array sería algo parecido a esto:

Código PHP:

Ver original$('#calendar').fullCalendar({
    editable: false,
    events: [
        <?php foreach ($eventos as $evento): ?>
        {
            id: <?php echo $evento['id']; ?>,
            title: <?php echo $evento['title']; ?>,
            // otros datos
        },
        <?php endforeach; ?>
    ]
});

Lo mismo, pero utilizando los datos de la consulta.

dark_17 · #3 (**permalink**) 10/12/2012, 16:22

Cita:

Iniciado por David

Lo que necesitas hacer no es hacer la consulta SQL desde el calendario (lo digo por el título), ya que el calendario es Javascript, que se ejecuta del lado del cliente.

Lo que tienes que hacer es realizar la consulta en PHP, y luego imprimir el resultado en la configuración de tu calendario. Por ponerte en ejemplo, si tuviera los datos en un array sería algo parecido a esto:

Código PHP:

Ver original$('#calendar').fullCalendar({
    editable: false,
    events: [
        <?php foreach ($eventos as $evento): ?>
        {
            id: <?php echo $evento['id']; ?>,
            title: <?php echo $evento['title']; ?>,
            // otros datos
        },
        <?php endforeach; ?>
    ]
});

Lo mismo, pero utilizando los datos de la consulta.

entonces la consulta iria arriba antes del javascript, luego inserto el javascript y dentro del javascript anido codigo php, habia leido por ahi que no se puede anidar codigo php dentro de javascript o me equivoco.? :s
Soy bien novato en javascript :(

David · #4 (**permalink**) 10/12/2012, 16:30

No es precisamente que no se puede anidar (si con anidar te refieres a lo que te indiqué arriba). Lo que debes tener claro es que PHP se ejecuta en el servidor, Javascript del lado del cliente. Cuando tu código Javascript se ejecute en el navegador de tu usuario el código PHP ya se habrá ejecutado en el servidor y devuelto la salida correspondiente.