2

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/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>
ADyson
  • 57,178
  • 14
  • 51
  • 63
achraf bourki
  • 159
  • 2
  • 11

1 Answers1

2

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/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>
Tom
  • 4,972
  • 3
  • 10
  • 28