Ask for help How do I update components?

[PanuwatChinpratan]

How do I update components? When I add data to the calendar ,because the component doesn't update the data in Project Data();
@artf
When Save

When it was loaded

This My code

editor.DomComponents.addType("api-content-05", {
  model: {
    defaults: {
      script: function () {
        let calendarEl = document.getElementById("calendar");
        let calendar = new FullCalendar.Calendar(calendarEl, {
          headerToolbar: {
            left: "addEventButton",
            center: "title",
            right: "",
          },

          customButtons: {
            addEventButton: {
              text: "Add event",
              click: function () {
                let dateStr = prompt("Enter a date in YYYY-MM-DD format");
                let date = new Date(dateStr + "T00:00:00");

                if (!isNaN(date.valueOf())) {
                  calendar.addEvent({
                    title: prompt("Enter event title"),
                    start: date,
                    allDay: true,
                  });
                  alert("Great. Now, update your database...");
                } else {
                  alert("Invalid date.");
                }
              },
            },
          },
          dateClick: async function (info) {
            let titlePrompt = await prompt("Event Title:");
            if (titlePrompt) {
              calendar.addEvent({
                title: titlePrompt,
                start: info.date,
                allDay: true,
              });

              console.log("titlePrompt", titlePrompt);
            }
          },

          eventClick: function (info) {
            window.parent.postMessage(
              { type: "openModal", title: info.event.title },
              "*"
            );

            window.addEventListener("message", function (event) {
              let messageType = event.data.type;

              if (messageType === "Delcalendar") {
                info.event.remove();
              } else if (messageType === "EditCalendar") {
                let newTitle = prompt("Edit Event Title:", info.event.title);
                if (newTitle !== null) {
                  info.event.setProp("title", newTitle);
                }
              }
            });
          },
        });
        calendar.render();
      },
    },

    init() {
      this.handleEndpointChange();
    },

    handleEndpointChange() {
      this.fetchAndRender();
    },
    fetchAndRender() {
      const content = `<div id='calendar'></div>`;
      this.components(content);
    },
  },
});

[artf]

Saving calendar data in GrapesJS JSON project sounds a bit nonsense.

In your custom component script, you have to integrate your storage of choice (eg. backend for your platform DB), this should be out of the editor's scope.

[PanuwatChinpratan]

Thank you, I managed to do it.