i create fullcalendar5, in fullcalendar5 update is done by dragging event and changing their place. but in my case update done when i click button update.
when i click on event it show form edit event, i want when i edit title value and click button edit title event change.
i try this code but not work ,I believe callendar 5 has a predefined function, in edit , i search but i can't find it.
<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/[email protected]/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 >
<div id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div >
<div >
<div style="background-color: #e1b058 ; color: white !important;">
<h5 id="exampleModalLabel">Nouvelle Notificaton </h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<div >
<div >
<div >
<label for="exampleInputPassword1">Titre de la tâche</label>
<input type="text" id="titre" name="name" required >
<span id="titleError" ></span>
</div>
</div>
<div >
<div >
<label for="exampleInputPassword1">Date de la tâche</label>
<input type="datetime-local" name="datee" id="date" required>
</div>
</div>
</div>
</div>
<div >
<button id="edit-event"><i ></i> edit </button>
</div>
</div>
</div>
</div>
<div >
<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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>CodePudding user response：
As per the documentation of the Event object :
All properties are read-only
Thus, you should use setProp() to update the title property.
<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/[email protected]/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 >
<div id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div >
<div >
<div style="background-color: #e1b058 ; color: white !important;">
<h5 id="exampleModalLabel">Nouvelle Notificaton </h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<div >
<div >
<div >
<label for="exampleInputPassword1">Titre de la tâche</label>
<input type="text" id="titre" name="name" required >
<span id="titleError" ></span>
</div>
</div>
<div >
<div >
<label for="exampleInputPassword1">Date de la tâche</label>
<input type="datetime-local" name="datee" id="date" required>
</div>
</div>
</div>
</div>
<div >
<button id="edit-event"><i ></i> edit </button>
</div>
</div>
</div>
</div>
<div >
<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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>