0

(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. introducir la descripción de la imagen aquí

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

6
  • Tienes un endpoint "/sesiones" que devuelve un documento JSON, pero tu llamada AJAX es a "/principal". Creo que tienes ahí algo que no encaja Commented el 7 nov. 2022 a las 9:56
  • Disculpa pablo, se me quedo así por las numerosas pruebas que fui haciendo ahora mismo tengo ambos en sesiones que sería la url a mostrar
    – Rodrigo
    Commented el 7 nov. 2022 a las 9:59
  • Primero que nada, tienes un typo en la ruta del primer método, pone sesioes, 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.
    – Benito-B
    Commented el 7 nov. 2022 a las 10:01
  • Hola Benito, lo del metodo "sesioes" era simplemente para enseñar la forma en la que devolvía las vistas normalmente (ese métododo no tiene nada que ver ni hace nada). De todas formas no entiendo por ejemplo tengo una vista sesiones.html en la que tengo el AJAX con el full calendar, pero necesito hacerle llegar el JSON cuando se haga click en el enlace a "sesiones" el caso es que normalente devuelvo un string con la ruta pero segun el tutorial seguido aquí se devuelve un ResponseEntity y no se como devolver el string de la vista a la que debe ir
    – Rodrigo
    Commented el 7 nov. 2022 a las 10:28
  • Creo que el error está bastante claro: la variable classname no ha sido definida. Has extraído start y end para luego crear startDate y endDate, pero te has olvidado de classname (¿quizá de title?) Commented el 7 nov. 2022 a las 11:01

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.