Error in mounted hook: "Error: The FullCalendar view "dayGridMonth" does not exist. Make sure your plugins are loaded correctly."

Question

我创建了一个 vue+dotnet 核心项目，在我的项目中遵循这个 repo. The project uses typescript for vue. Now, i want to add fullcalendar。但是当我运行这个项目时，我在浏览器控制台中得到了异常（安装钩子中的错误："Error: The FullCalendar view "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>

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

Answer 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] };
    },
})

Error in mounted hook: "Error: The FullCalendar view "dayGridMonth" does not exist. Make sure your plugins are loaded correctly."

Error in mounted hook: "Error: The FullCalendar view "dayGridMonth" does not exist. Make sure your plugins are loaded correctly."

fullcalendar

typescript

vue-component

vuetify.js