如何在 FullCalendar 中调用事件的自定义属性或字段？

Question

I would like to know, how can I get other components (ID, title, start and end) in FullCalenda.

I have a table, in a database, that have a lot of fields like status, responsible, departament, and I do a select in the table who give me a JSON of PHP for the FullCalendar. In the FullCalendar I can get the standards attributes of the Full Calendar that are id, title , start and end.

How can I get other result attributes on the database selection (fields like status, responsible, departament) ?

The array below, is the result of my select.

• In the image above, I can get the title, start, end and color (who are natives of FullCalendar), but I can't get the type and status. How can I do that ?

Below you can see the code where I receive the data in the FullCalendar:

 eventClick: function(info) { //O parâmetro 'info' é que contém os valores que vem do retorno da consulta do banco de dados info.jsEvent.preventDefault(); //Passando valores para os elementos HTML $('#visualizar #mostrar-titulo').text(info.event.title); $('#visualizar #mostrar-inicio').text(info.event.start.toLocaleString()); $('#visualizar #mostrar-fim').text(info.event.start.toLocaleString()); $('#visualizar #mostrar-status').text(info.event.STATUS); //Exibe o modal (quando clicamos no respectivo evento) que mostra as informações resultantes da consulta no banco de dados. $('#visualizar').modal('show'); },

Code HTML

 <div class="modal fade" id="visualizar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Detalhes do Eventos</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!-- <div class="visevent">--> <dl class="row"> <dt class="col-lg-3">Título do evento</dt> <dd class="col-lg-9" id="mostrar-titulo"></dd> <dt class="col-lg-3">Status do Evento</dt> <dd class="col-lg-9" id="mostrar-status"></dd> <dt class="col-lg-3">Início do evento</dt> <dd class="col-lg-9" id="mostrar-inicio"></dd> <dt class="col-lg-3">Fim do evento</dt> <dd class="col-lg-9" id="mostrar-fim"></dd> </dl> <!-- </div>--> </div> </div> </div> </div>

Watch how I show the modal (when we click in the respective event).

• Notice that STATUS does not appear.

Answer 1

You may try to use "extendedProps" option for an event object to access non-standard field as follow:

eventClick: function(info) {
  info.jsEvent.preventDefault();

  //Passando valores para os elementos HTML         
  $('#visualizar #mostrar-titulo').text(info.event.title);
  $('#visualizar #mostrar-inicio').text(info.event.start.toLocaleString());
  $('#visualizar #mostrar-fim').text(info.event.start.toLocaleString());
  $('#visualizar #mostrar-status').text(info.event.extendedProps.STATUS);
  $('#visualizar').modal('show');
}

I haven't tried your code, but I used my own fields like this.

Please be aware about version changes and using options in FullCalendar, as mentioned about extendedProperties in this post:

https://github.com/fullcalendar/fullcalendar/issues/4652