如何通过点击按钮更新FullCalendar 5中的事件？

• 基于FullCalendar 5开发日历功能，组件默认支持拖拽事件调整位置实现更新，但需求改为点击「更新按钮」完成事件更新
• 点击日历事件会弹出编辑表单，修改标题后点击编辑按钮，希望同步更新对应事件的标题，但现有代码未生效，不清楚FullCalendar 5的事件编辑方法

1. 直接修改Event对象的title属性不会触发FullCalendar的视图更新——FullCalendar对事件对象做了封装，必须调用官方提供的方法修改属性
2. 每次点击事件时重复绑定#edit-event的点击事件，会导致多次触发逻辑，可能引发异常

使用FullCalendar提供的setProp()方法修改事件属性，同时避免重复绑定点击事件，代码调整如下：

<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(info){
                      $('#exampleModal').modal('toggle');
                      // 填充表单数据，处理日期格式适配
                      $('#titre').val(info.event.title);
                      $('#date').val(info.event.start.toISOString().slice(0, 16));
                      
                      // 先解绑之前的点击事件，避免重复绑定导致多次触发
                      $('#edit-event').off("click").on("click", function(){
                           // 使用setProp修改事件属性，自动触发日历视图更新
                           info.event.setProp('title', $('#titre').val());
                           // 处理日期更新
                           const newDate = new Date($('#date').val());
                           info.event.setProp('start', newDate);
                           
                           $('#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>

• FullCalendar 5中，事件对象的属性不能直接赋值修改，必须使用setProp(属性名, 属性值)方法，该方法会自动触发日历视图的更新
• 每次绑定编辑按钮的点击事件前，先用off("click")解绑之前的事件，防止多次点击日历事件后重复触发逻辑
• 日期处理时，需要将datetime-local输入框的格式转换为FullCalendar可识别的Date对象或ISO字符串

内容的提问来源于stack exchange，提问作者achraf bourki