Why doesn't it re-render when I press undo?

[PanuwatChinpratan]

            editor.DomComponents.addType('api-content-05', {
                model: {
                    defaults: {
                        script: function () {
                            var calendarEl = document.getElementById('calendar');
                            var calendar = new FullCalendar.Calendar(calendarEl, {
                                headerToolbar: {
                                    left: 'addEventButton',
                                    center: 'title',
                                    right: '',
                                },
                                customButtons: {
                                    addEventButton: {
                                        text: 'Add event',
                                        click: function () {
                                            var dateStr = prompt(
                                                'Enter a date in YYYY-MM-DD format'
                                            );
                                            var date = new Date(dateStr + 'T00:00:00'); // will be in local time

                                            if (!isNaN(date.valueOf())) {
                                                // valid?
                                                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) {
                                    var 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) {
                                        const messageType = event.data.type;

                                        if (messageType === 'Delcalendar') {
                                            info.event.remove();
                                        } else if (messageType === 'EditCalendar') {
                                            const newTitle = prompt(
                                                'Edit Event Title:',
                                                info.event.title
                                            );
                                            if (newTitle !== null) {
                                                info.event.setProp('title', newTitle);
                                            }
                                        }
                                    });
                                },
                            });
                            calendar.render();
                            console.log('callllllllllll', calendar);
                        },
                        traits: [
                            {
                                type: 'input',
                                name: 'Change-Title',
                                label: 'change title',
                            },
                        ],
                    },

                    init() {
                        [].forEach((eventType) => {
                            // console.log('eventType', eventType);
                            this.listenTo(this, eventType, this.handleEndpointChange);
                        });

                        this.handleEndpointChange();
                    },

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

[PanuwatChinpratan]

Done

editor.DomComponents.addType('api-content-05', {
                model: {
                    defaults: {
                        traits: [
                            {
                                type: 'edit-endpoint',
                                name: 'editendpoint',
                                label: 'Edit Endpoint',
                            },
                            {
                                type: 'endpoint-trait',
                                name: 'endpoint',
                                label: 'Endpoint',
                            },

                            {
                                type: 'map-title',
                                name: 'mapTitle',
                                label: 'Title',
                            },
                            {
                                type: 'map-body',
                                name: 'mapBody',
                                label: 'Body',
                            },
                            {
                                type: 'filter-index',
                                name: 'filterIndex',
                                label: 'Filter',
                            },
                        ],
                        endpoint: '',
                        title: '',
                        body: '',
                        script: function () {
                            var calendarEl = document.getElementById('calendar');
                            var calendar = new FullCalendar.Calendar(calendarEl, {
                                headerToolbar: {
                                    left: 'addEventButton',
                                    center: 'title',
                                    right: '',
                                },

                                customButtons: {
                                    addEventButton: {
                                        text: 'Add event',
                                        click: function () {
                                            var dateStr = prompt(
                                                'Enter a date in YYYY-MM-DD format'
                                            );
                                            var date = new Date(dateStr + 'T00:00:00'); // will be in local time

                                            if (!isNaN(date.valueOf())) {
                                                // valid?
                                                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) {
                                    var 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 },
                                        '*'
                                    );

                                    // ใน iframe
                                    window.addEventListener('message', function (event) {
                                        const messageType = event.data.type;

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

                    init() {
                        [
                            'change:endpoint',
                            'change:title',
                            'change:body',
                            'change:filterIndex',
                            'change:editendpoint',
                        ].forEach((eventType) => {
                            this.listenTo(this, eventType, this.handleEndpointChange);
                            // console.log(this.handleEndpointChange);
                        });

                        this.handleEndpointChange();
                    },

                    handleEndpointChange() {
                        const { endpoint, title, body, filterIndex, editendpoint } =
                            this.attributes;
                        this.fetchAndRender(endpoint, title, body, filterIndex, editendpoint);
                    },
                    fetchAndRender() {
                        console.log(this.components([` <div id='calendar'></div>`]));
                    },
                },
            });

[mosh-tudor]

@PanuwatChinpratan I hope you understand that this is not your personal blog, and with such posts are you confusing others to find answers to their own problems?