dayClick 在单击某天时未显示模式弹出窗口,因此无法创建任务/约会,以下是我与 dayClick 相关的编码部分。以下是 dayClick 函数的模态弹出窗口的 HTML,显示了模态弹出窗口的 id,并且是 dayClick 函数中模态弹出窗口的正确 id。我已经包含了 jquery 和 bootstrap。
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
defaultDate: new Date(),
editable: true,
timezone: 'Europe/London',
eventLimit: true, // allow "more" link when too many events
displayEventTime: false,
locale: "en-gb",
firstDay: 1,
events: "fetch-tasks-appointments.php",
dayClick: function(date, jsEvent, view) {
$("#success-modal").modal("show");
$('#title').text(date.format);
$("#startdate").val(date.format());
$('#starttime').text(date.format);
$("#enddate").val(date.format());
$('#endtime').text(date.format);
},
});
calendar.render();
});
</script>
<div class="modal fade" id="success-modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header success-modal">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<form action="tasks-appointments-calendar.php" method="post">
<div class="form-group">
<label for="eventtitle">Event Title:</label>
<input type="title" name="title" class="form-control" id="title">
<input type="date" name="startdate" class="form-control" id="startdate">
<input type="text" name="starttime" class="form-control" id="starttime">
<input type="date" name="enddate" class="form-control" id="enddate">
<input type="text" name="endtime" class="form-control" id="endtime">
</div>
<button type="submit" value="submit" name="submit" class="btn btn-success float-button-light">Save Task/Appointment</button>
</form>
</div>
</div>
</div>
</div>