(Actualizo) Hola estoy tratando de mostrar en full calendar los eventos que tengo en la bbdd utilizando springboot.
He seguido un tutorial en el que mostrar los eventos en full calendar con Ajax y me ha quedado de la siguiente forma (controlador):
@RequestMapping(value = "/sesiones", method = RequestMethod.GET,produces="application/json")
@ResponseBody
public ResponseEntity<String> getPlanificado()
{
Iterable<Events> events = eventsService.getAll();
HttpHeaders headers = new HttpHeaders();
headers.add("Content-Type", "application/json; charset=utf-8");
if (events.iterator().hasNext())
{
return new ResponseEntity<String>(new JSONSerializer().include("id","title","end","start").exclude("*").serialize(events), headers, HttpStatus.OK);
}
return new ResponseEntity<String>(null, headers, HttpStatus.OK);
}
La vista:
<div class="contenido" id="calendario-sesiones"></div>
<div class="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-info">
<h5 class="modal-title" id="staticBackdropLabel">Sesión</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="formulario">
<div class="modal-body">
<div class="form-floating mb-3">
<input type="date" class="form-control" id="start">
<label for="start" class="form-label">Fecha</label>
</div>
</div>
<div class="modal-footer">
<a type="button" class="btn btn-danger" data-bs-dismiss="modal">Eliminar</a>
<a type="button" class="btn btn-warning" data-bs-dismiss="modal">Cancelar</a>
<a class="btn btn-info" data-bs-dismiss="modal" id="btnAccion" type="submit">Registrar</a>
</div>
</form>
</div>
</div>
</div>
Y el script con el full calendar y el Ajax
var myModal = new bootstrap.Modal(document.getElementById('myModal'));
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendario-sesiones');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'es',
headerToolbar: {
left: 'prev, next, today',
center: 'title',
right: 'dayGridMonth, timeGridWeek, listWeek'
},
dateClick: function(info){
document.getElementById('start').value = info.dateStr;
myModal.show();
}
});
calendar.render();
})
$.ajax({
url: '/sesiones',
headers:{
'Accept' : 'application/json',
'Content-Type': 'application/json'
},
success: function(result){
if(result!== null){
var len = result.length;
if(len > 0){
var jsonString = JSON.stringify(result);
console.log(jsonString);
for(var i=0; i<len; i++){
console.log(result[i]);
var title=result[i].title;
var start=result[i].start;
var startDate = new Date(start);
console.log("startDate :"+startDate);
var end=result[i].end;
var endDate = new Date(end);
console.log("endDate :"+endDate);
var event={ title:classname, start:startDate, end:endDate};
$('#calendar').fullCalendar( 'renderEvent', event, true);
}
}
}else{
console.log("NO events");
}
},error: function (result) {
console.log("AJAX error");
}
});
El calendario se muestra correctamente pero sin los eventos y por lo que veo el json se manda correctamente, por consola me sale este error.
en la línea 68 del script que es la que genera el error tengo esto:
var event={ title:classname, start:startDate, end:endDate};
Gracias
"/sesiones"
que devuelve un documento JSON, pero tu llamada AJAX es a"/principal"
. Creo que tienes ahí algo que no encajasesioes
, le falta una N. Y segundo, deberías tener una ruta separada para cada cosa!! El navegador necesita obtener la vista no el json y tu ajax necesita el json y no la vista, son dos cosas diferenciadas! Puedes dejar la vista como/sesiones
y el json ponerlo en/sesiones/calendarData
por ejemplo.