Fullcalendar with Vue 3 support

Question

I installed the fullcalendar library to my Vue 3 project but when I serve the application, I get a warning in my terminal that says:

export 'default' (imported as 'Vue') was not found in 'vue'

This crashes the app with the same error when I open the browser. I tried creating the shim.d.ts with the required content but this doesn't still solve the problem. Is there any workaround for this or is this library not supported with Vue 3?

Answer 1

The way I managed to get in fullcalendar in Vue3 is to initialize it in ES6. I guess you can make this more dynamic, but see below the basic code which should get it working, using ref in the setup and the onMounted lifecycle hook. This needs to be further customized and filled with events. I guess it could also be improved, still can be a good starting point.

<template>
        <div class="card" ref="cal"></div>
</template>

<script>
import { ref,defineComponent, onMounted} from 'vue';
import {Calendar} from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

export default defineComponent({
name:'myCalendar',
setup(){
    const cal = ref(null);
    
    onMounted(()=>{
        const Tcalendar = new Calendar(cal.value, {
        plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
        initialView: 'dayGridMonth',
         headerToolbar: {
         left: 'prev,next today',
         center: 'title',
         right: 'dayGridMonth,timeGridWeek,listWeek'
             }
        });
        Tcalendar.render();
    })
    return {
        cal,
        
    }
    }
})