挂载钩子中的错误：“错误：FullCalendar 视图“dayGridMonth”不存在。确保您的插件正确加载。”

Posted 2023-02-23

【中文标题】挂载钩子中的错误：“错误：FullCalendar 视图“dayGridMonth”不存在。确保您的插件正确加载。”

【英文标题】：Error in mounted hook: "Error: The FullCalendar view "dayGridMonth" does not exist. Make sure your plugins are loaded correctly."

【发布时间】：2020-06-30 10:18:47

【问题描述】：

我已经按照repo 创建了一个 vue+dotnet 核心项目。该项目使用 typescript for vue。现在，我想将fullcalendar 添加到我的项目中。但是当我运行该项目时，在浏览器控制台中出现异常（挂载钩子中的错误：“错误：FullCalendar 视图“dayGridMonth”不存在。请确保您的插件已正确加载。”）。

Schedule.vue

<template>
  <v-container fluid>
    <v-slide-y-transition mode="out-in">
      <v-row>
        <v-col>
            <FullCalendar :weekends="false" defaultView="dayGridMonth" :plugins="calendarPlugins" :events="fsEvents"/>
        </v-col> 
      </v-row>
    </v-slide-y-transition>
  </v-container>
</template>

<script lang="ts">
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';

import  Component, Vue, Prop  from 'vue-property-decorator';
import Flow from '@/components/Flow.vue';

@Component(
    components: 
        Flow,
        FullCalendar,
    ,
    props: 
        fsEvents: 
            type: Array,
            default: () => 
                return [ title: 'event 1', date: '2020-04-01' ,  title: 'event 2', date: '2020-04-02' ];
            ,
        ,
    ,
    data: () => 
        return  calendarPlugins: dayGridPlugin ;
    ,
)

export default class ScheduleView extends Vue  
</script>

<style lang='scss'>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
</style>

我应该如何在我的代码中加载完整日历组件的插件？谢谢。

【参考方案1】：

我已经找到了解决方案。数据中的 calendarPlugins 应该是一个数组而不是一个对象。以下代码解决了我的问题。

@Component(
    components: 
        Flow,
        FullCalendar,
    ,
    props: 
        fsEvents: 
            type: Array,
            default: () => 
                return [ title: 'event 1', date: '2020-04-01' ,  title: 'event 2', date: '2020-04-02' ];
            ,
        ,
    ,
    data: () => 
        return  calendarPlugins: [dayGridPlugin] ;
    ,
)