Foros del Web » Programando para Internet » PHP »

[SOLUCIONADO] FullCalendar mostrar datos de base de datos por JSON

Estas en el tema de FullCalendar mostrar datos de base de datos por JSON en el foro de PHP en Foros del Web. Hola a todos, tengo problemas en mostrar los eventos creados en mi base de datos en el plugin FULLCALENDAR, adjunto el código que utilizo. Aqui ...
  #1 (permalink)  
Antiguo 30/03/2016, 20:59
Avatar de kip13  
Fecha de Ingreso: agosto-2011
Mensajes: 167
Antigüedad: 13 años, 2 meses
Puntos: 13
Pregunta FullCalendar mostrar datos de base de datos por JSON

Hola a todos, tengo problemas en mostrar los eventos creados en mi base de datos en el plugin FULLCALENDAR, adjunto el código que utilizo.

Aqui hago la llamada de los datos por JSON
Código PHP:
<?php 
        
require ('/config.php');

        
$link mysql_connect("$hotsdb","$usuariodb","$clavedb") or die(mysql_error());
        
mysql_select_db('calendario',$link);
        
$query "SELECT title, startdate, enddate FROM calendar";
        
$result mysql_query($query) or die(mysql_error());
        
$arr = array();
        while(
$row mysql_fetch_assoc($result)){
             
$arr[] = $row
        }  
        echo 
json_encode($arr);  
    
?>
Este es el resultado de la consulta por JSON.



Aca es la pagina donde muestro el calendario.
Código PHP:
<link href="fullcalendar-2.6.1/fullcalendar.css" rel='stylesheet' />
<
script src="fullcalendar-2.6.1/lib/jquery.min.js"></script>
<script src="fullcalendar-2.6.1/lib/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="fullcalendar-2.6.1/lib/moment.min.js"></script>
<script type="text/javascript" src="fullcalendar-2.6.1/fullcalendar.min.js"></script>
<script>
$(document).ready(function() { 
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
    //configure options for the calendar
       header: {
          left: 'prev,next today',
          center: 'title',
          right: 'agendaWeek,agendaDay'
       },


       events: "/reservas.php",
       editable: true,
       defaultView: 'agendaWeek',
       allDayDefault: false,

    });
});
</script>
<style type='text/css'>

    body {
        margin-top: 40px;
        text-align: center;
        font-size: 13px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

    #calendar {
        width: 400px;
        margin: 0 auto;
        }

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html> 
Me gustaría que me ayuden diciéndome tal vez que me falta en el código o si debo agregar algún campo en la tabla creada, he leído mucho para intentar resolverlo y nada, espero de verdad me ayuden, muchas gracias, SALUDOS!
  #2 (permalink)  
Antiguo 30/03/2016, 21:06
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años, 4 meses
Puntos: 263
Respuesta: FullCalendar mostrar datos de base de datos por JSON

yo los imprimo directamente con php dentro del js:

Código PHP:
Ver original
  1. while($row_eve = $eve->fetch_array()){
  2.                             //fecha de inicio
  3.                             list($F, $H) = explode("/",$row_eve['start']);
  4.                             //fecha fin
  5.                             list($FF, $HH) = explode("/",$row_eve['end']);
  6.                            
  7.                             //fechas del inicio
  8.                             list($FY, $FM, $FD) = explode("-", $F);
  9.                            
  10.                             //fechas del fin
  11.                             list($FYY, $FMM, $FDD) = explode("-",$FF);
  12.                            
  13.                            
  14. echo "{
  15.         id: '".$row_eve['id']."',
  16.         id_url: '".$row_eve['url']."',
  17.         id_curcha: '".$row_eve['id_curcha']."',
  18.         tipo: '".$row_eve['tipo']."',
  19.         title: '".$row_eve['title']."',
  20.         Asunto: '".$row_eve['body']."',
  21.         start: new Date(".$FY.", ".$FM.", ".$FD.", ".$H."),
  22.         end: new Date(".$FYY.", ".$FMM.", ".$FDD.", ".$HH."),
  23.         backgroundColor: '".$row_eve['class']."',
  24.         allDay: false
  25.         },";
  26.                            
  27.                     }

claro en el caso tuyo podrian cambiar algunas variables o XX datos dependiendo de como los estes almacenando
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 30/03/2016, 21:12
 
Fecha de Ingreso: diciembre-2015
Mensajes: 529
Antigüedad: 8 años, 10 meses
Puntos: 39
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Tienes que seguir la sintaxis que te exige fullcalendar. cambia el campo "startdate" por "start", y "enddate" por "end".

Acá documentación doc fullcalendar objetos de evento.

Ten cuidado cuando trates acentos o caracteres especiales, ya que el json no te devolverá nada y te dará dolores de cabeza. Saludos
  #4 (permalink)  
Antiguo 30/03/2016, 22:15
Avatar de kip13  
Fecha de Ingreso: agosto-2011
Mensajes: 167
Antigüedad: 13 años, 2 meses
Puntos: 13
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Hola gracias por responder, seguí tu consejo y ahora estoy rompiéndome la cabeza con el FullCalendar, aunque voy manejándolo mejor.

Implemente lo que me dices, pero aun no puedo mostrar nada, mira te adjunto los cambios que hice siguiendo la documentación que me pasaste.

Aquí esta donde mostrare el calendario, este es la función, he hecho algunos cambios visuales para mejorar la percepción del mismo.

Código PHP:
<script>
$(
document).ready(function() { 
    var 
date = new Date();
    var 
date.getDate();
    var 
date.getMonth();
    var 
date.getFullYear();
    var 
calendar = $('#calendar').fullCalendar({
    
//configure options for the calendar
       
header: {
          
left'prev,next today',
          
center'title',
          
right'agendaWeek,agendaDay'
       
},
       
events: {
        
url'/reservas.php',
        
allDayfalse
    
},
    
buttonText:{
         
today:    'Hoy',
    
month:    'Mes',
    
week:     'Semana',
    
day:      'Dia'
    
},
       
editablefalse,
       
defaultView'agendaWeek',
       
allDaySlot:false,
       
titleFormat'MMMM',
          
axisFormat'HH:mm',
   
timeFormat'HH:mm{ - HH:mm}',
    
slotDuration'00:60:00',
    
slotEventOverlapfalse,
     
columnFormat: {
                   
// Monday, Wednesday, etc
                
week'ddd D',
                
day'dddd D' // Monday 9/7
            
},
            
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    
monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
    
dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    
dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],
    
minTime"09:00"
    
    
});
}); 
Esto me muestra:


Bueno ahora te adjunto la base que tengo a ver si notas que algun capo tiene un cotejamiento que Json no me acepte.


Hice ya el cambio de la sintaxis, creí que no era necesario pero al parecer si.

Tienes alguna idea de como puedo lograr que me muestre los datos?

Si tengo algún error hazlo saber, para trabajar en ello.

Gracias!!

Última edición por kip13; 30/03/2016 a las 22:16 Razón: ortografia
  #5 (permalink)  
Antiguo 30/03/2016, 22:19
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años, 4 meses
Puntos: 263
Respuesta: FullCalendar mostrar datos de base de datos por JSON

url: '/reservas.php',

prueba asi:

url: 'reservas.php',

a menos que este en un directorio anterior al que esta fullcalendar que seria asi:

url: '../reservas.php',
__________________
[email protected]
HITCEL
  #6 (permalink)  
Antiguo 30/03/2016, 22:28
Avatar de kip13  
Fecha de Ingreso: agosto-2011
Mensajes: 167
Antigüedad: 13 años, 2 meses
Puntos: 13
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Probé con aquello, no funciono, mira te adjunto como tengo ordenado el sitio.


Parece que esta a un directorio anterior al FullCalendar, hice la prueba y nada.
Estoy pensando en que quizás estoy llamando mal a los campos en el Json o talvez tengo algun error en la creacion de la base, la verdad estoy algo complicado con eso.
  #7 (permalink)  
Antiguo 30/03/2016, 22:30
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años, 4 meses
Puntos: 263
Respuesta: FullCalendar mostrar datos de base de datos por JSON

como puedes ver en el codigo que te pase, yo realizo el llamado con php directamente, pero claro todo depende de tus campos, los registors en ellos y otras variables
__________________
[email protected]
HITCEL
  #8 (permalink)  
Antiguo 30/03/2016, 22:34
Avatar de kip13  
Fecha de Ingreso: agosto-2011
Mensajes: 167
Antigüedad: 13 años, 2 meses
Puntos: 13
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Podrías mostrarme un código mas claro de como haces concretamente la llamada por PHP, entiendo lo que haces pero no se si donde yo lo vaya a colocar sea el correcto.
Por cierto esa llamada la haces desde el index o algun archivo aparte como el Json?
Gracias por responder y ayudarme, gracias de verdad.
  #9 (permalink)  
Antiguo 30/03/2016, 22:49
 
Fecha de Ingreso: diciembre-2015
Mensajes: 529
Antigüedad: 8 años, 10 meses
Puntos: 39
Respuesta: FullCalendar mostrar datos de base de datos por JSON

En la versión que tengo, tengo diferente la sintaxis, no se si sea por eso. Prueba así

Código Javascript:
Ver original
  1. <script>
  2. $(document).ready(function() {
  3.     var date = new Date();
  4.     var d = date.getDate();
  5.     var m = date.getMonth();
  6.     var y = date.getFullYear();
  7.     var calendar = $('#calendar').fullCalendar({
  8.     //configure options for the calendar
  9.        header: {
  10.           left: 'prev,next today',
  11.           center: 'title',
  12.           right: 'agendaWeek,agendaDay'
  13.        },
  14.        events: '/reservas.php', // ACA CAMBIA

Saludos
  #10 (permalink)  
Antiguo 30/03/2016, 22:52
Avatar de kip13  
Fecha de Ingreso: agosto-2011
Mensajes: 167
Antigüedad: 13 años, 2 meses
Puntos: 13
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Lo he hecho de todas las formas que he encontrado, incluido eventsResource['']. Aun no puedo hallar porque sucede aquello.
Declare la opcion allDay:false, eso tendra algo que ver, ademas no tengo aquel campo en mi base, podria ser eso?

Gracias
  #11 (permalink)  
Antiguo 30/03/2016, 22:54
 
Fecha de Ingreso: diciembre-2015
Mensajes: 529
Antigüedad: 8 años, 10 meses
Puntos: 39
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Si le das a inspeccionar elemento, te muestra algún error en la consola? Creo que la url está mal, quitale la diagonal. Que quede así "reservas.php"
Vamos progresando
  #12 (permalink)  
Antiguo 30/03/2016, 23:03
Avatar de kip13  
Fecha de Ingreso: agosto-2011
Mensajes: 167
Antigüedad: 13 años, 2 meses
Puntos: 13
Respuesta: FullCalendar mostrar datos de base de datos por JSON

No, no me muestra algun error, he estado pensando en que el formato de fecha de mysql podria ser diferente al de fullcalendar, tal vez sea eso? que opinan?

Intentare llamarlo y darle un formato diferente. Les aviso como va, mientras si tienen algo que pueda ayudarme les agradeceria mucho.

Saludos
  #13 (permalink)  
Antiguo 30/03/2016, 23:07
 
Fecha de Ingreso: diciembre-2015
Mensajes: 529
Antigüedad: 8 años, 10 meses
Puntos: 39
Respuesta: FullCalendar mostrar datos de base de datos por JSON

No, ese es el formato que mysql y fullcalendar maneja. Postea de nuevo tu código como lo tienes actualmente, el del php y el del fullcalendar, y también postea lo que te imprime el json, básicamente lo que hiciste empezando el tema. Saludos.
  #14 (permalink)  
Antiguo 30/03/2016, 23:35
Avatar de kip13  
Fecha de Ingreso: agosto-2011
Mensajes: 167
Antigüedad: 13 años, 2 meses
Puntos: 13
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Listo aqui los adjunto.

Json:
Código PHP:
<?php 
        
require ('/config.php');

        
$link mysql_connect("$hotsdb","$usuariodb","$clavedb") or die(mysql_error());
        
mysql_select_db('calendario',$link);
        
$query "SELECT title, start, end FROM calendar";
        
$result mysql_query($query) or die(mysql_error());
        
$arr = array();
        while(
$row mysql_fetch_assoc($result)){
             
$arr[] = $row
        }  
        echo 
json_encode($arr);  
    
?>
Resutado:


Index:
Código PHP:
<link href="fullcalendar-2.6.1/fullcalendar.css" rel='stylesheet' />
<
script src="fullcalendar-2.6.1/lib/jquery.min.js"></script>
<script src="fullcalendar-2.6.1/lib/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="fullcalendar-2.6.1/lib/moment.min.js"></script>
<script type="text/javascript" src="fullcalendar-2.6.1/fullcalendar.min.js">
</script>
<script>
$(document).ready(function() { 
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
    //configure options for the calendar
       header: {
          left: 'prev,next today',
          center: 'title',
          right: 'agendaWeek,agendaDay'
       },
       events: {
        url: 'reservas.php',
        allDay: false
    },
    buttonText:{
         today:    'Hoy',
    month:    'Mes',
    week:     'Semana',
    day:      'Dia'
    },
       editable: false,
       defaultView: 'agendaWeek',
       allDaySlot:false,
       titleFormat: 'MMMM',
          axisFormat: 'HH:mm',
   timeFormat: 'HH:mm{ - HH:mm}',
    slotDuration: '00:60:00',
    slotEventOverlap: false,
     columnFormat: {
                   // Monday, Wednesday, etc
                week: 'ddd D',
                day: 'dddd D' // Monday 9/7
            },
            monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],
    minTime: "09:00"
    
    
    });
});
</script>
<style type='text/css'>

    body {
        margin-top: 40px;
        text-align: center;
        font-size: 16px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

    #calendar {
        margin: 0 auto;
        width: 515px;
        }

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html> 
Resultado:
  #15 (permalink)  
Antiguo 30/03/2016, 23:50
 
Fecha de Ingreso: diciembre-2015
Mensajes: 529
Antigüedad: 8 años, 10 meses
Puntos: 39
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Prueba si funciona así.
Código Javascript:
Ver original
  1. events: 'reservas.php',

O así

Código PHP:
Ver original
  1. events: [{"title":"ders","start":"2016-03-31 15:00:00","end":"2016-03-31 16:00:00"}],

Me dices cual funciona.
  #16 (permalink)  
Antiguo 31/03/2016, 00:12
Avatar de kip13  
Fecha de Ingreso: agosto-2011
Mensajes: 167
Antigüedad: 13 años, 2 meses
Puntos: 13
Respuesta: FullCalendar mostrar datos de base de datos por JSON

Me funciono de las dos maneras, pero creo que fue porque cambie la forma en que llamaba los datos a msqli, me mostraba esto y tuve que hacerlo y asi resulto.

Asi me mostraba por no usar msqli:


Ahora que hice ese cambio logro mostrarme los datos de la reserva.


Gracias por la ayuda!!!

Estare preguntando cualquier otra cosa, ahora creare un archivo para añadir eventos y eliminarlos.

Saludos y gracias de nuevo!!

Etiquetas: fullcalendar, html, json, mysql, select, sql, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:48.