Update Event in FullCalendar V5

Question

I have a problem with updating an event in FullCalendar v5 with a modal.

I have tried my best to find a solution, but unfortunately I have failed.

The first part is for opening and closing the modal, then there is some data for default event.

and reading event from array then when you click on a day or select more than one day an modal will open and after you click on submit data of event will add to calendar in this part i want to add a part when i click on an event a modal open and i can to edit an event

$(document).ready(function() {
      var modal = document.getElementById("myModal");
      var span = document.getElementsByClassName("close")[0];

      $("#open").click(function() {
        modal.style.display = "block";
      });

      // When the user clicks on <span> (x), close the modal
      $("span").click(function() {
        modal.style.display = "none";
        $('#EventT').val('');
      });

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }


      const myEvents = {
        title: "event5",
        start: '2022-08-21',
        end: '2022-08-29'
      }
      var myEvent = [{
          id: 'eve',
          title: 'event1',
          start: '2022-08-21'
        },
        {
          title: 'event2',
          start: '2010-01-05',
          end: '2010-01-07'
        },
        {
          title: 'event3',
          start: '2010-01-09T12:30:00',
        },
        {
          title: myEvents.title,
          start: myEvents.start,
          end: myEvents.end,
        }
      ];


      
      var localeSelectorEl = document.getElementById('locale-selector');
      var calendarEl = document.getElementById('calendar');


      var calendar = new FullCalendar.Calendar(calendarEl, {

        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },



        initialDate: '2020-09-12',
        navLinks: true, // can click day/week names to navigate views
        selectable: true,
        nowIndicator: true,
        selectMirror: true,

        select: function(info) {
          var modal = document.getElementById("myModal");
          document.getElementById("StartD").value = info.startStr;
          document.getElementById("EndD").value = info.endStr;
          modal.style.display = "block";
          calendar.unselect()
        },


        dateClick: function(info) {
          var modal = document.getElementById("myModal");
          modal.style.display = "block";
          document.getElementById("StartD").value = info.dateStr;
          document.getElementById("EndD").value = info.dateStr;
        },

        eventClick: function(info) {
          var modal = document.getElementById("myModal");
          modal.style.display = "block";
          document.getElementById("EventT").value = info.event.title;
          document.getElementById("StartD").value = info.event.startStr;
          // document.getElementById("EndD").value = info.event.endStr;
          var ddd = info.event.endStr;
          if (ddd.length === 0) {
            document.getElementById("EndD").value = info.event.startStr;
          } else {
            document.getElementById("EndD").value = info.event.endStr;
          }
        },
        editable: true,
        dayMaxEvents: true,
        eventSources: [{
            events: myEvent,

          }

        ]
      });
      calendar.render();

      $("#submit").on("click", function(event) {
          var title = $("#EventT").val();
          var start = $("#StartD").val();
          var end = $("#EndD").val();
          modal.style.display = "none";

          if (title) {
            calendar.addEvent({
                title: title,
                start: start,
                end: end,
              }

            }

          });
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

You can update event using setProp and/or setExtendedProp options when "save" button clicked on your "edit modal".

forexample:

calendar1 = new FullCalendar.Calendar(calendar-element, {
                height: 650,
                initialView: 'timeGridDay',
                slotMinTime: '08:00:00',
                eventClick: function(eventInfo){    
                    eventInfo.event.setProp('title', 'This is a title');
                    eventInfo.event.setStart('2022-12-01 15:00:00');
                    eventInfo.event.setEnd('2022-12-01 16:00:00');
                }
            }