2

Tengo un problema con fullcalendar v4, intento cargar los datos mediante ajax, pero no se muestran los eventos y no me lanza ningún error.

en la v3 de fullcalendar no tenia problemas, pero en la v4 no puedo lograr hacerlo.

en la función de mi controlador creo un array con los datos necesarios para cargar los eventos.

los eventos los envió a la base de datos con el formato que proporciona carbón toIso8601String

Codigo de fullcalendar script

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');  
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'dayGrid','timeGrid', 'interaction', 'list' ],
            height: 800,
            header: {
                left: 'prev,today,next',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,listMonth'
            },
            buttonText: {
                today: 'Hoy',
                month: 'Mes',
                agendaWeek: 'Semana',
                agendaDay: 'Dia'
            },
            axisFormat: 'HH:mm',
            timeFormat: 'HH:mm',
            editable: false,
            droppable: false,
            eventTextColor:"#FFF",
            eventColor:"#337AB7",
            selectable: true,
            selectHelper: true,
            eventLimit: 4,
            eventDurationEditable: false,
            locale: 'es',
            timeZone: 'UTC -4',
            themeSystem: 'themeSystem',
            defaultView: 'dayGridMonth',
            nowIndicator: true,
            eventsSources: 
                function ( start, end, timeZoneStr, callback ){
                    $.ajax({
                      type:'GET',
                      url:'{{ url("load_calendar" )}}',
                      success: function (data){
                        callback(data);
                      }
                    })
                  }
        })
        calendar.render();
});
</script>

esta es la funcion de mi controlador

public function load_calendar(){

    $all_event = calendarModel::all()->toArray();


    $event_data=array();

    foreach ($all_event as $key => $event_val) {

        $event_data[$key]['title'] =$event_val['event_titulo'];
        $event_data[$key]['start'] =date('d/m/Y H:i:s', strtotime($event_val['event_fecha_inicio']));
        $event_data[$key]['end']  =date('d/m/Y H:i:s', strtotime($event_val['event_fecha_final']));

        $event_data[$key]['start_formate'] =date('d/m/Y H:i:s', strtotime($event_val['event_fecha_inicio']));
        $event_data[$key]['end_formate']  =date('d/m/Y H:i:s', strtotime($event_val['event_fecha_final']));


        $event_data[$key]['events_id'] = $event_val['id'];
        $event_data[$key]['event_description'] =$event_val['event_descripcion'];
        $event_data[$key]['created_at'] =date('d/m/Y', strtotime($event_val['created_at']));
        $event_data[$key]['updated_at'] =date('d/m/Y', strtotime($event_val['updated_at']));

    } 

        echo json_encode($event_data);
        dump($event_data);

    }

mi ruta es la siguiente

Route::get('load_calendar','calendarController@load_calendar')->name('load_calendar');

Este es lo que devuelve el array del json

introducir la descripción de la imagen aquí

4
  • estas lineas son de prueba? :echo json_encode($event_data);dump($event_data);
    – Shassain
    el 21 jul. 2019 a las 18:24
  • @Shassain si, el echo era para poder visualizar de forma directa la ruta (esta en return actualmente) y el dump para visualizar la carga de los arrays en el dump-server como lo muestra la imagen que adjunte a la pregunta
    – KilzaNiko
    el 22 jul. 2019 a las 2:08
  • @KilzaNiko no es correcto que pongas SOLUCIONADO al título de tu pregunta y que ahi mismo publiques la respuesta, si ya marcaste una solución como aceptada con eso alcanza. y en caso de que la solución sea la tuya entonces publicala en la zona de respuestas (y no olvides marcar como ACEPTADA la que resolvió tu problema)
    – BetaM
    el 22 jul. 2019 a las 23:44
  • Aaaaa vale, lo edito de inmediato
    – KilzaNiko
    el 22 jul. 2019 a las 23:46

2 respuestas 2

1

eventsSources no existe, es eventSources.

Si lo que querés es mostrar los eventos que obtenés por JSON, usá events (as a json feed) . Reemplazá tu eventsSources por events.

events: '{{ url("load_calendar" )}}'

Por otro lado, el formato de las fechas de start y end no es correcto. Tenés que utilizar alguna de las definidas en Date Parsing:

$event_data[$key]['start'] = date('Y-m-d H:i:s', strtotime($event_val['event_fecha_inicio']));
$event_data[$key]['end']  = date('Y-m-d H:i:s', strtotime($event_val['event_fecha_final']));

Por último, como bien dice @Shassain, si querés especificar que querés devolver un JSON usá la sintaxis de Laravel:

return response()->json($event_data);

Sino con devolver directamente el array es suficiente, Laravel lo convierte automáticamente en JSON.

return $event_data;
12
  • Gracias por responder @azeós, hice los cambios que me indicaste y ahora si me indica un error Uncaught TypeError: callback is not a function el cual hace referencia a la linea callback(data);, tenia entendido que ese error lo generaba la funcion function ( start, end, timeZoneStr, callback ), tambien probe con timezone y con no incluirla, al igual que con startStr y endStr, pero aun asi me aparece dicho error
    – KilzaNiko
    el 22 jul. 2019 a las 0:57
  • No tendrías que tener eso, solo la línea que te pasé. Actualizá tu pregunta y pone el nuevo código.
    – azeós
    el 22 jul. 2019 a las 3:20
  • Esta actualizado ahora
    – KilzaNiko
    el 22 jul. 2019 a las 9:22
  • @KilzaNiko borrá toda la función que tenés dentro de events. Solo poné la URL como te puse más arriba. Con eso solo tiene que ser suficiente.
    – azeós
    el 22 jul. 2019 a las 18:37
  • 1
    @KilzaNiko No tendrá que ver con el formato de las fechas start y end? Probá desde PHP formatearlas como Y-m-d H:i:s. La consola no te muestra ningún error?
    – azeós
    el 22 jul. 2019 a las 23:26
1

El unico error que veo son las lineas:

echo json_encode($event_data);
dump($event_data);

El dump($event_data); debería de ser borrada. Y de preferencia cambiar el modo de retorno de echo a return

return response()->json($event_data);
1
  • igual había intentado con el return, el dump lo use para verificar que el json me entregaba el array de forma correcta (lo cual si esta correcto) y también probé borrando el dump y con return, pero aun así no me indica ningun error y no carga ningún evento adjuntare una imagen con el tipo de array que devuelve el dump, quizas tenga algo malo
    – KilzaNiko
    el 21 jul. 2019 a las 22:43

Tu Respuesta

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

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