0

Estoy tratando de hacer uso de la libreria fullcalendar para extraer y mostrar datos en un calendario con los diferentes eventos creados por los usuarios de mi página.

Siguendo un tutorial he conseguido mostrar el calendario, además de mostrar eventos ficticios creados así

        events:[{
            title:'Evento 1',
            descripcion: "descripcion Evento 1",
            start:'2021-03-31',
            end:'2021-03-31',
            color:'red',
            textColor:'white'

          },
          {
            title:'Evento2',
            descripcion: "descripción Evento 2",
            start:'2021-03-28',
            end:'2021-03-28'
          }
        ],

El problema lo tengo al tratar de mostrar los datos que tengo en la base de datos. Siguiendo tutoriales he hecho la consulta y los datos los he almacenado en una variable que posteriormente la he parseado con la funcion php json_encode($variable).

Lo que no se, y es algo que estoy intuyendo es que si no se me muestran los datos, ya que en mi base de datos tengo titulo y descripcion de evento, y esto no es compatible.

Aparte, tengo separados en carpetas para tenerlo ordenado, por un lado los scripts de js y por otro los archivos php, no se si puede ser también por eso, que tiene que estar todo junto en un mismo archivo

La parte de html donde quiero mostrar en un modal la info del evento al pulsar sobre una fecha (el html está metido dentro de un fichero php).

<!--Correspondiente a modal cuando se seleccione una fecha en el calendario -->
    <div class="modal" tabindex="-1" role="dialog" id="ventanaModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tituloEvento"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                   <div id="infoEvento"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success">Agregar</button>
                    <button type="button" class="btn btn-success">Modificar</button>
                    <button type="button" class="btn btn-danger">Borrar</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                </div>
            </div>
        </div>

El script

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendario');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    locale:'es',
    dateClick: function(info) {
        //alert('Clicked on: ' + info.dateStr);
       //alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
        //alert('Current view: ' + info.view.type);
        // change the day's background color just for fun
        //info.dayEl.style.backgroundColor = 'red';
       //$("#ventanaModal").modal();
      },
      events:'eventos.php',
      eventClick:function(info){
        $("#tituloEvento").html(info.title);
        $('#infoEvento').html(info.descripcion);
        $("#ventanaModal").modal();
      }
      
    
  });
  
  calendar.render();
});

El código PHP

<?php


header('Content-type: application/json; charset=utf-8"');
require_once('includes/basedatos.php');     
   
    
$bd = new BD();

$datos = array();

$sql = "SELECT * FROM actividades where tipo_actividad='idiomas'";
        
$sentencia = $bd->conectarBD()->prepare($sql);
$sentencia -> execute();

$resultados = $sentencia -> fetchAll(PDO::FETCH_ASSOC); 


        
echo json_encode($resultados);

?>

¿Me podéis ayudar?

Muchas gracias

1 respuesta 1

1

Creo que te funcionaría más que los eventos fueran una función. ¿Por qué? es mejor a la hora de manejar eventos cuando no vienen con el formato que te dice fullcalendar.

Si estás muy seguro que lo que devuelve tu código php es un json de este tipo, por ejemplo:

events: [//...//]

Donde lo que esté dentro de los corchetes son json estructurados como los que pusiste de ejemplo o parecidos, te diría que una opción es hacer algo como esto:

//Codigo del Calendar
...
events: function(fetchInfo, successCallback, failureCallback){
   fetch('/path/file.php')
     .then(res => res.json())
     .then(res => {
        successCallback(
          res.events.map(event => {
            return {
              'title': event.title,
              'description': event.description
              'start': event.start,
              'end': event.end,
              'textColor': event.textColor
            }
         })
       )
    })
   .catch(err => failureCallback)
}

Luego de eso si llamas a tu calendar.render() y debería mostrar los datos.

P.D: Uso fetch porque me parece más cómodo, pero tú puedes adaptarlo a jQuery sin problemas. Lo importante es dejar al successCalback el trabajo de construir los eventos para mostrar en el calendario.

4
  • Hola @gaidyjg te agradezco que me ayudes una vez más. Los datos que me devuelve la consulta me salen de este modo [{"id_actividad":31,"titulo":"Salida con perros","descripcion":"Salida con perros por las Moreras,"fecha":"2020-08-01","tipo_actividad":"animales","ciudad":"Valladolid","id_usuario":1}]. Lo que quiero extraer realmente es el título para ponerlo en el título del modal, y la descripción, para añadirlo en la descripción del modal. Lo que no se es como adaptar esta función que me indicas, y te agradezco, a mi código. Muchas gracias una vez más
    – rilejon
    Commented el 26 mar. 2021 a las 19:28
  • 1
    No es nada. Si quieres capturar los datos de tu evento, usando la función eventClick te da esa información. Lo primero que debes hacer es convertir los events en una función así como te expliqué. Luego con eventClick, este captura automáticamente la información con sus métodos asociados.
    – gaidyjg
    Commented el 26 mar. 2021 a las 19:41
  • muchas gracias, con tus pautas y con la ayuda de un amigo ya se me muestra la información!!! :)
    – rilejon
    Commented el 26 mar. 2021 a las 20:35
  • Bien por ti. Felicidades.
    – gaidyjg
    Commented el 26 mar. 2021 a las 20:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.