Symfony - Fullcalendar event description undefined

Question

I have a controller that gets data from database and turns it in events for fullcalendar, when I display a modal clicking in one of this events, it shows that description and email are undefined.

Image of modal undefined fields

But in XHR I can see that im receiving all the data from the controller.

Image of XHR GET

Modal:

<div id="fullCalModal" class="modal fade" style="z-index: 9999;>
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

            <h4 id="modalTitle" class="modal-title"></h4>
        </div>
        <div id="modalBody" class="modal-body">         

        <p id="ev_start" class="modal-body"></p>
        <p id="ev_end" class="modal-body"></p>
        <p id="ev_mail" class="modal-body"></p>
        <p id="ev_desc" class="modal-body"></p>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>
        </div>
    </div>
</div>

---

Javascript:

eventClick: function(info) {
    var eventObj = info.event;      


      alert('Clicked ' + eventObj.title + ' with id: ' + eventObj.id + eventObj.description);

        $('#modalTitle').html(eventObj.title);
        $('#ev_titulo').html(eventObj.title);

        $('#ev_start').html('Fecha inicio: ' + eventObj.start);
        $('#ev_end').html('Fecha fin: ' + eventObj.end);
        $('#ev_desc').html('Descripcion: ' + eventObj.description);
        $('#ev_mail').html('Mail: ' + eventObj.mail);


        $('#fullCalModal').modal('show');

  },

---

Controller:

public function loadAction()
{

    $em = $this->getDoctrine()->getManager();
    $eventos = $em->getRepository('App:Evento')->findAll();

    $data = array();

    foreach ($eventos as $evento)
    {       
        $events['id'] = $evento->getId();
        $events['title'] = $evento->getTitle();
        $events['start'] = $evento->getBeginAt()->format('Y-m-d');;
        $events['end'] = $evento->getEndAt()->format('Y-m-d');;
        $events['color'] = $evento->getColor();
        $events['description'] = $evento->getDescription();
        $events['mail'] = $evento->getMail();
        array_push($data, $events);
    }

        return $this->json($data);

}

Answer 1

The event parsing documentation states that

Every other non-standard prop will be transferred over to the extendedProps hash in the Event Object.

Since description and mail are not standard event properties in fullCalendar (as listed in that documentation), then they will be placed under the "extendedProps" object in the final event object which fullCalendar creates based on the data it receives from your server.

Therefore in your eventClick code you should be able to write

$('#ev_desc').html('Descripcion: ' + eventObj.extendedProps.description);
$('#ev_mail').html('Mail: ' + eventObj.extendedProps.mail);

and populate the properties successfully into your modal.

P.S. This behaviour is also mentioned in the event object documentation as well. If you have previously used fullCalendar version 3 or below, then this is a change from how these earlier versions worked.