How to use Fullcalendar at Block

[PanuwatChinpratan]

@artf

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
 editor.DomComponents.addType('custom-calendar', {
                model: {
                    defaults: {
                        script: function () {
                            var calendarEl = document.getElementById('calendar');
                            var calendar = new FullCalendar.Calendar(calendarEl, {
                                initialView: 'dayGridMonth',
                            });
                            calendar.render();
                        },
                        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: '',
                        // editendpoint: '',
                    },
                    init() {
                        [
                            'change:endpoint',
                            'change:title',
                            'change:body',
                            'change:filterIndex',
                            'change:editendpoint',
                        ].forEach((eventType) => {
                            // console.log('eventType', eventType);
                            this.listenTo(this, eventType, this.handleEndpointChange);
                        });

                        this.handleEndpointChange();
                    },
                    handleEndpointChange() {
                        const { endpoint } = this.attributes;
                        this.fetchAndRender(endpoint);
                    },
                    handleEndpointChange() {
                        const { endpoint, title, body, filterIndex, editendpoint } =
                            this.attributes;
                        this.fetchAndRender(endpoint, title, body, filterIndex, editendpoint);
                    },
                    fetchAndRender(endpoint, title, body, filterIndex, editendpoint) {
                        const [startIndex, endIndex] = filterIndex
                            ? filterIndex.split(',').map(Number)
                            : [0, 0];

                        fetch(endpoint)
                            .then((response) => response.json())
                            .then((data) => {
                                let OBJ = data;
                                if (editendpoint) {
                                    const arr = editendpoint.split('.');
                                    console.log('arr', arr);

                                    arr.forEach((key) => {
                                        if (key.includes('[') && key.includes(']')) {
                                            // ถ้า key มีรูปแบบ [index]
                                            const parts = key.split('[');
                                            const objKey = parts[0];
                                            const objIndex = parseInt(parts[1].replace(']', ''));

                                            if (OBJ[objKey] && Array.isArray(OBJ[objKey])) {
                                                OBJ = OBJ[objKey][objIndex];
                                            } else {
                                                // กรณีที่ key เป็นอะเรย์แต่ไม่ใช่ carts
                                                OBJ = OBJ[objKey];
                                            }
                                        } else {
                                            // กรณีที่ key ไม่มีรูปแบบ [index]
                                            OBJ = OBJ[key];
                                        }
                                    });
                                }
                                console.log('fetch สำเร็จนะถ้าแสดงข้อมูล', OBJ);
                                const content = OBJ.slice(startIndex, endIndex + 1).map((item) => {
                                    const Title = item[title || 'title'];

                                    return ` `;
                                });

                                this.components(content);
                                console.log('ดึงข้อมูลจาก API มาอัปเดตแล้ว');
                            })
                            .catch((error) => {
                                let milo = document.createElement('div');
                                milo.id('calendar');
                                
                                this.components([]);
                                console.log('ดึงข้อมูลจาก API ไม่สําเร็จหรือใส่ผิด');
                            });
                    },
                },
            });

            editor.BlockManager.add('custom-calendar', {
                label: 'Custom Calendar',
                category: 'API',
                attributes: {
                    class: 'fa fa-calendar',
                },
                content: {
                    type: 'custom-calendar',
                    contents: ``,
                },

[PanuwatChinpratan]

@artf i can't use and wanna add event click
PLS Help Thanks.

[PanuwatChinpratan]

I'm done

  <script>
            const editor = grapesjs.init({
                container: '#gjs',
                height: '100%',
                canvas: {
                    scripts: [
                        'https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js',
                    ],

                    styles: [],
                },
                storageManager: false,
                plugins: ['gjs-blocks-basic', 'grapesjs-preset-webpage'],
                pageManager: {},
            });
            editor.DomComponents.addType('custom-calendar', {
                model: {
                    defaults: {
                        script: function () {
                            var calendarEl = document.getElementById('calendar');
                            var calendar = new FullCalendar.Calendar(calendarEl, {
                                initialView: 'dayGridMonth',
                                headerToolbar: {
                                    left: '',
                                    center: 'title',
                                    right: '',
                                },
                            });
                            calendar.render();
                        },
                        traits: [
                            {
                                type: 'map-title',
                                name: 'mapTitle',
                                label: 'Title',
                            },
                            {
                                type: 'map-body',
                                name: 'mapBody',
                                label: 'Body',
                            },
                            {
                                type: 'filter-index',
                                name: 'filterIndex',
                                label: 'Filter',
                            },
                        ],
                        endpoint: '',
                        title: '',
                        body: '',
                        // editendpoint: '',
                    },

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

                        this.handleEndpointChange();
                    },

                    handleEndpointChange() {
                        const { endpoint, title, body, filterIndex, editendpoint } =
                            this.attributes;
                        this.fetchAndRender(endpoint, title, body, filterIndex, editendpoint);
                    },
                    fetchAndRender(endpoint, title, body, filterIndex, editendpoint) {
                        const [startIndex, endIndex] = filterIndex
                            ? filterIndex.split(',').map(Number)
                            : [0, 0];

                        fetch(endpoint)
                            .then((response) => response.json())
                            .then((data) => {
                                let OBJ = data;
                                if (editendpoint) {
                                    const arr = editendpoint.split('.');
                                    console.log('arr', arr);

                                    arr.forEach((key) => {
                                        if (key.includes('[') && key.includes(']')) {
                                            // ถ้า key มีรูปแบบ [index]
                                            const parts = key.split('[');
                                            const objKey = parts[0];
                                            const objIndex = parseInt(parts[1].replace(']', ''));

                                            if (OBJ[objKey] && Array.isArray(OBJ[objKey])) {
                                                OBJ = OBJ[objKey][objIndex];
                                            } else {
                                                // กรณีที่ key เป็นอะเรย์แต่ไม่ใช่ carts
                                                OBJ = OBJ[objKey];
                                            }
                                        } else {
                                            // กรณีที่ key ไม่มีรูปแบบ [index]
                                            OBJ = OBJ[key];
                                        }
                                    });
                                }
                                console.log('fetch สำเร็จนะถ้าแสดงข้อมูล', OBJ);
                                const content = OBJ.slice(startIndex, endIndex + 1).map((item) => {
                                    const Title = item[title || 'title'];

                                    return ` `;
                                });

                                this.components(content);
                                console.log('ดึงข้อมูลจาก API มาอัปเดตแล้ว');
                            })
                            .catch((error) => {
                                this.components([`<div id='calendar'></div>`]);
                                console.log('ดึงข้อมูลจาก API ไม่สําเร็จหรือใส่ผิด');
                            });
                    },
                },
            });

            editor.BlockManager.add('custom-calendar', {
                label: 'Custom Calendar',
                category: 'API',
                attributes: {
                    class: 'fa fa-calendar',
                },
                content: {
                    type: 'custom-calendar',
                    contents: '',
                },
            });
        </script>