How to get the external plugin CSS, JS and HTML through GrapesJS export feature?

. But we are unable to show users the calendar on the canvas after drag and drop with render function in MODEL that is why we used OnRender in the VIEW.

Did you try the component type definition i posted for you? it has been tested and it is working:

So, is the MODEL alone sufficient to render as well as add HTML to export feature? If yes could you please explain how?

yes. it will render the component in the canvas, and include the final code in final html.

if you need any further help for your specific case, i would appreciate a fiddle. cheers!

Thanks a lot, @pouyamiralayi. The code you gave was working. Our code was not able to pick the dom element to render the calendar. Now it is working as expected.

Thanks a lot for helping us out !!!! :-p

Hi there! what you are looking for is using js inside components.

just include the required js and css in the canvas scripts and styles section:

canvas: {
            styles: [
                'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.css',
                'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.css',
            ],
            scripts: [
                'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.js',
                'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.js',
            ],
        },

after that build your own custom type component:

             model: {
                defaults: {
                    ccid:'',
                    tagName: 'div',
                    resizable:true,
                    script: function(){
                            const id = '{[ ccid ]}'
                            var calendarEl = document.getElementById(id);

                            var calendar = new FullCalendar.Calendar(calendarEl, {
                                plugins: [ 'dayGrid' ]
                            });
                            calendar.render();
                    }
                },
            },
            view:{
                init(){
                    this.model.set('ccid',this.model.ccid)
                }
            }
        

then on code preview you will see the result script:

cheers!