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

【问题标题】：How to call custom properties or fields for event in FullCalendar?如何在 FullCalendar 中调用事件的自定义属性或字段？
【发布时间】：2019-11-28 13:26:56
【问题描述】：

我想知道，如何在 FullCalenda 中获取其他组件（ID、标题、开始和结束）。

我在数据库中有一个表，其中包含很多字段，例如状态、负责人、部门，我在表中进行了选择，它为我提供了 PHP 的 JSON 用于 FullCalendar。在 FullCalendar 中，我可以获得完整日历的标准属性，即 id、title、start 和 end。

如何获取数据库选择的其他结果属性（状态、负责人、部门等字段）？

下面的数组，是我选择的结果。

在上图中，我可以得到标题、开始、结束和颜色（都是 FullCalendar 的原生），但我无法获取类型和状态。我该怎么做？

您可以在下面看到我在 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');


},

代码 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>

观看我如何显示模式（当我们点击相应的事件时）。

请注意，STATUS 没有出现。

【问题讨论】：

标签： javascript php fullcalendar

【解决方案1】：

您可以尝试对事件对象使用“extendedProps”选项来访问非标准字段，如下所示：

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');
}

我没有尝试过你的代码，但我使用了我自己的字段。

请注意 FullCalendar 中的版本更改和使用选项，如本文中关于 extendedProperties 所述：

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

【讨论】：