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

Question

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

我在数据库中有一个 table，它有很多字段，例如状态、责任、部门，我在 table 中做了一个 select 谁给我FullCalendar 的 JSON of PHP。在 FullCalendar 中，我可以获得完整日历的标准属性，即 id、title、start 和 end。

如何在数据库中获取其他结果属性 selection（状态、责任、部门等字段）？

下面的数组，是我select.

的结果

在上图中，我可以获取标题、开始、结束和颜色（他们是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 没有出现。

Answer 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 中的版本更改和使用选项，如本 post 中有关 extendedProperties 所述：

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

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

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

javascript

php

fullcalendar