时间戳

首页 > 解决方案 > 挂载钩子中的错误：“错误：FullCalendar 视图“dayGridMonth”不存在。确保您的插件已正确加载。”

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

问题描述

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

调度.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>

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

标签： typescriptfullcalendarvue-componentvuetify.js

解决方案

我已经找到了解决方案。数据中的 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] };
    },
})

推荐阅读