FullCalendar v4 - 如何使用表单在日历上显示事件？

Question

我无法使用 bootstrap 模式/表单动态添加事件。我设法捕捉到任何日期的点击，然后模式打开。我完成了输入，但无法让它们显示在日历上。我获取输入的值并将它们保存在变量中以使用 addEvent 将它们传递给日历，但我不能。我刚开始编程，非常感谢您的帮助！

bis 我无法使用 bootstrap 模式/表单动态添加事件。我设法捕捉到任何日期的点击，然后模式打开。我完成了输入，但无法让它们显示在日历上。我获取输入的值并将它们保存在变量中以使用 addEvent 将它们传递给日历，但我不能。我刚开始编程，非常感谢您的帮助！

这里是 FullCalendar 和 Js

// VARIABLES
    // Leen el valor de cada campo del formulario
    let titulo = document.querySelector("#titulo").value    
    let descripcion = document.querySelector("#descripcion").value
    let fecha = document.querySelector("#fecha").value
    let hora = document.querySelector("#hora").value
    let color = document.querySelector("#color").value
    // Submit formulario
    let enviar = document.querySelector("#btnAgregar") 

  // FULLCALENDAR
  document.addEventListener('DOMContentLoaded', function () {
    let calendarEl = document.getElementById('calendar');

    let calendar = new FullCalendar.Calendar(calendarEl, {
      locale: "es",
      plugins: ["interaction", "dayGrid", "timeGrid"],
      selectable: true,
      defaultView: "timeGridWeek",
      header: {
        left: "prev,next today",
        center: "title",
        right: "timeGridDay,timeGridWeek,dayGridMonth",
      },

      // Selecciona con click en una fecha/hora determinada
      dateClick: function () {

        // Acciona el modal
        $("#modalEventos").modal()

        // EVENT LISTENER
        enviar.addEventListener("submit", enviarEvento)

        // FUNCIONES
        function enviarEvento() {
          calendar.addEvent({    // https://fullcalendar.io/docs/event-model
            title: titulo,
            description: descripcion,
            start: fecha,   // dateStr  
            hora: hora,   // 'T00:00:00'
            color: color
          })
          //Cierra el modal
          $('#modalEventos').modal('toggle'); // hide
        }
      },

    });
    calendar.render();
  });

这是我使用的表格的HTML：

<!-- Modal -->
        <div class="modal fade" id="modalEventos" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="tituloEvento">Agregar Evento</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="#" id="guardar">
                        <div class="modal-body">
                            <div class="form-group row" id="elTitulo">
                                <label for="titulo" class="col-sm-2 col-form-label">Titulo</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="titulo">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="descripcion" class="col-sm-2 col-form-label">Descripción</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" id="descripcion" rows="2"></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="fecha" class="col-sm-2 col-form-label">Fecha</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="fecha" value="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="hora" class="col-sm-2 col-form-label">Horario</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="hora">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="color" class="col-sm-2 col-form-label">Color</label>
                                <div class="col-sm-3">
                                    <input type="color" class="form-control" id="color" value="#3788d8">
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" id="btnAgregar">Agregar</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

Answer 1

我可以看到两个问题 - 一个绝对是个问题，另一个可能是（虽然我没有测试过）：

1) 绝对有问题的是您从模态输入中获取值的方式。您的代码在页面首次加载时获取这些值，并将它们放入变量中。但是，由于这是在页面加载时发生的，这意味着这是在用户有任何机会向其中键入任何内容之前！然后保留这些变量，直到您尝试将其添加到日历中。您需要等到用户单击提交按钮，然后再尝试查看他们输入的内容。

2) 您的函数 enviarEvento 及其关联的事件侦听器在 "dateClick" 回调中声明，这意味着每次有人点击时都会声明该函数和侦听器的新版本。这不是必需的，虽然我没有测试过，但它也有可能以意想不到的方式表现 JavaScript 处理闭包的方式 - 例如由于事件处理程序的构建，您可能会发现每次单击时它都会重新添加所有以前添加的事件。您可以将它们移到日历声明之外。

这是一个固定版本：

// FULLCALENDAR
document.addEventListener('DOMContentLoaded', function () {
  // Submit formulario
  let enviar = document.querySelector("#btnAgregar");
  let calendarEl = document.getElementById('calendar');

  let calendar = new FullCalendar.Calendar(calendarEl, {
    locale: "es",
    plugins: ["interaction", "dayGrid", "timeGrid"],
    selectable: true,
    defaultView: "timeGridWeek",
    header: {
      left: "prev,next today",
      center: "title",
      right: "timeGridDay,timeGridWeek,dayGridMonth",
    },

    // Selecciona con click en una fecha/hora determinada
    dateClick: function () {

      // Acciona el modal
      $("#modalEventos").modal();
    },
  });

  calendar.render();

  // EVENT LISTENER
  enviar.addEventListener("submit", enviarEvento)

  // FUNCIONES
  function enviarEvento() {

    let titulo = document.querySelector("#titulo").value;
    let descripcion = document.querySelector("#descripcion").value;
    let fecha = document.querySelector("#fecha").value;
    let hora = document.querySelector("#hora").value;
    let color = document.querySelector("#color").value;

    calendar.addEvent({    // https://fullcalendar.io/docs/event-model
      title: titulo,
      description: descripcion,
      start: fecha,   // dateStr  
      hora: hora,   // 'T00:00:00'
      color: color
    });

    //Cierra el modal
    $('#modalEventos').modal('toggle'); // hide
  }
});

还有一些建议：

1) dateClick 函数会告诉您点击的日期，但您忽略了该传入值。您可以使用它来预填充模式中的 "start" 字段，这样用户就不必键入它。参见 https://fullcalendar.io/docs/dateClick

2) 更好的是，如果您从使用 dateClick 切换到 select 回调，那么当您使用 "timeGrid" 或 "timeline" 视图时，它将允许用户拖放（或只需单击）到 select 特定时间段，然后告诉您他们 select 编辑的开始和结束日期和时间 - 您可以再次使用这是为了预填充表单并使其更加用户友好。参见 https://fullcalendar.io/docs/select-callback

FullCalendar v4 - 如何使用表单在日历上显示事件？

FullCalendar v4 - How to show events on the calendar with a form?

javascript

fullcalendar

dom-events

fullcalendar-4