我无法用bootstrap模态表单动态添加事件。我设法抓住点击任何日期和模式打开。我完成了输入，但我不能让它们显示在日历上。我得到了输入的值，并将它们保存在变量中，以便通过addEvent将它们传递到日历上，但我做不到。我是第一次接触编程，希望得到帮助。
之二 我无法用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">×</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>
我可以看到两个问题--一个肯定是问题，另一个可能是（虽然我还没有测试过）。
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.iodocsdate点击
2）更好的是，如果您从使用 dateClick 至 select 回调，那么当你使用 "时间网格 "或 "时间线 "视图时，它将允许用户拖放（或只是点击）选择一个特定的时间段，然后告诉你他们选择的开始和结束日期& 时间--同样，你可以使用它来预先填充表单，使其更方便用户。查看 https:/fullcalendar.iodocsselect-callback。