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

Question

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

bis 我无法使用引导模式/表单动态添加事件。我设法在任何日期抓住点击，模式打开。我完成了输入，但无法让它们显示在日历上。我获取输入的值并将它们保存在变量中，以使用 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函数会告诉你点击的日期，但你忽略了该传入值。您可以使用它来预填充模式中的"开始"字段，这样用户就不必键入它。请参阅 https://fullcalendar.io/docs/dateClick

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