Fullcalendar with Vue 3 support

user_10815637 0
Viewed 2161

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?

vuejs3 vue.js typescript fullcalendar
2 Answers

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,
        
    }
    }
})
user_94014860

I can get primevue's fullcalendar component working in a vue 3 app, inside of their diamond template, though I haven't done much with it.

There is a dependency on @fullcalendar/core, but not on @fullcalendar/vue

user_8656470
Related