如何在点击按钮时更新完整日历5中的事件

Question

i创建fullcalendar5，在fullcalendar5中，通过拖动event并更改它们的位置来完成更新。但在我的情况下，CCD_ 4在我单击CCD_ 5时完成。当我单击event时，它显示表单编辑事件，我希望当我编辑title值并单击按钮编辑title事件更改时。我尝试了这个代码，但没有成功，我相信callendar 5有一个预定义的函数，在编辑中，我搜索了一下，但找不到。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="container main">
<div class="modal fade  mb-3" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-add" style="background-color: #e1b058 ; color: white !important;">
<h5 class="modal-title " id="exampleModalLabel">Nouvelle Notificaton </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Titre de la tâche</label>
<input type="text" class="form-control" id="titre" name="name" required >
<span id="titleError" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Date de la tâche</label>
<input type="datetime-local" class="form-control" name="datee" id="date" required>
</div>
</div>

</div>
</div>
<div class="modal-footer">
<button  class="btn btn-success" id="edit-event"><i class="fas fa-save"></i> edit </button>
</div>
</div>
</div>
</div>
<div class="card mb-4 mt-3 p-2">
<div id='calendar'></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
eventColor: 'orange',
editable: true,
events: [
{
id: '1',
title: 'All Day',
start: '2022-09-01'
}
],
eventClick: function(event){
$('#exampleModal').modal('toggle');
$('#titre').val(event.event.title);
$('#date').val(event.event.start);
$('#edit-event').on("click", function(){
event.event.title = $('#titre').val(); 
$('#exampleModal').modal('hide');
});
},
});
calendar.render();  
});
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>

Answer 1

根据事件对象的文档：

所有属性都是只读

因此，应该使用setProp()来更新title属性。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="container main">
<div class="modal fade  mb-3" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-add" style="background-color: #e1b058 ; color: white !important;">
<h5 class="modal-title " id="exampleModalLabel">Nouvelle Notificaton </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Titre de la tâche</label>
<input type="text" class="form-control" id="titre" name="name" required >
<span id="titleError" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Date de la tâche</label>
<input type="datetime-local" class="form-control" name="datee" id="date" required>
</div>
</div>

</div>
</div>
<div class="modal-footer">
<button  class="btn btn-success" id="edit-event"><i class="fas fa-save"></i> edit </button>
</div>
</div>
</div>
</div>
<div class="card mb-4 mt-3 p-2">
<div id='calendar'></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
eventColor: 'orange',
editable: true,
events: [
{
id: '1',
title: 'All Day',
start: '2022-09-01'
}
],
eventClick: function(event){
$('#exampleModal').modal('toggle');
$('#titre').val(event.event.title);
$('#date').val(event.event.start);
$('#edit-event').on("click", function(){
event.event.setProp("title", $('#titre').val());
$('#exampleModal').modal('hide');
});
},
});
calendar.render();  
});
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>