CODEWITHSUNDEEP
javascriptphpfullcalendar
Gato de Schrödinger
Gato de Schrödinger

Reputation: 199

How to call custom properties or fields for event in FullCalendar?

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.

enter image description here

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).

enter image description here

Upvotes: 1

Views: 267

Answers (1)

Khurram Ishaque
Khurram Ishaque

Reputation: 798

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

Upvotes: 2

Related Questions