支持 Vue 3 的完整日历答案

【问题标题】：Fullcalendar with Vue 3 support支持 Vue 3 的完整日历
【发布时间】：2021-02-06 10:12:15
【问题描述】：

我在我的 Vue 3 项目中安装了 fullcalendar 库，但是当我为应用程序提供服务时，我在终端中收到一条警告：

在“vue”中找不到导出“默认”（导入为“Vue”）

当我打开浏览器时，这会使应用程序崩溃并出现相同的错误。我尝试使用所需内容创建 shim.d.ts 但这仍然不能解决问题。是否有任何解决方法或者 Vue 3 不支持这个库？

【问题讨论】：

暂时你不能。您必须在 Vue 3 中等待 fullCalendar 迁移。或者您仍然可以在 Vue 2 中使用组合 api，但我个人不喜欢这个选项。
您还可以在完整的 vanilla JS 中使用 fullCalendar 并为 Vue 3 制作自己的插件系统。

标签： typescript vue.js fullcalendar vuejs3

【解决方案1】：

我设法在 Vue3 中进入 fullcalendar 的方法是在 ES6 中对其进行初始化。我想你可以让它更加动态，但是请看下面应该让它工作的基本代码，在设置中使用 ref 和 onMounted 生命周期钩子。这需要进一步定制并填充事件。我想它还可以改进，仍然可以作为一个很好的起点。

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

【讨论】：

【解决方案2】：

我可以在 vue 3 应用程序中，在他们的 diamond 模板中使用 primevue 的 fullcalendar 组件，尽管我没有做太多。

依赖于@fullcalendar/core，但不依赖于@fullcalendar/vue

【讨论】：