Ошибка в подключенном хуке: «Ошибка: представление FullCalendar« dayGridMonth »не существует. Убедитесь, что ваши плагины загружены правильно». - PullRequest
0 голосов
/ 19 марта 2020

Я создал основной проект vue + do tnet с последующим repo . В проекте используется машинопись для 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>

Как мне загрузить плагин для полного календаря comopnent в моем коде? Спасибо.

1 Ответ

0 голосов
/ 20 марта 2020

Я нашел решение. 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] };
    },
})
...