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">×</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