FullCalendar Vue：viewType“ timeGridWeek”不可用请确保您已加载所有必需的插件

问题描述

我正在尝试使用timeGridWeek的Fullcalendar Vue视图。在以下情况下，我会不断收到以下错误消息：

Error: viewType "timeGridWeek" is not available. Please make sure you've loaded all neccessary plugins

我已安装必需的插件：

"@fullcalendar/daygrid": "^5.3.2"
"@fullcalendar/interaction": "^5.3.1"
"@fullcalendar/timegrid": "^5.3.1"
"@fullcalendar/vue": "^5.3.1"

并且正在按照Demo App中的说明导入它们，但是我总是会收到该错误。

我认为这是由于我的本地项目引起的：我 am 能够使演示应用程序正常运行，并将该过程复制到另一个项目中。它从未在该项目中工作过。

要解决此问题，我该怎么做？我已删除节点模块，通过npm重新安装了所有软件包，构建了用于生产的项目，但没有运气。我的完整Vue组件和package.json如下：

Authenticated.vue

import FullCalendar from "@fullcalendar/vue";
import dayGridplugin from "@fullcalendar/daygrid";
import timeGridplugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

export default {
  components: {
    FullCalendar,// make the <FullCalendar> tag available
  },data: function () {
    return {
      calendarOptions: {
        plugins: [
          dayGridplugin,timeGridplugin,interactionPlugin,// needed for dateClick
        ],headerToolbar: {
          left: "prev,next today",center: "title",right: "dayGridMonth,timeGridWeek,timeGridDay",},initialView: "timeGridWeek",initialEvents: [],// alternatively,use the `events` setting to fetch from a Feed
        editable: true,selectable: true,selectMirror: true,dayMaxEvents: true,weekends: true,select: this.handleDateSelect,eventClick: this.handleEventClick,eventsSet: this.handleEvents,/* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
      },currentEvents: [],};
  },methods: {
    handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends; // update a property
    },handleDateSelect(selectInfo) {
      let title = prompt("Please enter a new title for your event");
      let calendarapi = selectInfo.view.calendar;

      calendarapi.unselect(); // clear date selection

      if (title) {
        calendarapi.addEvent({
          id: createEventId(),title,start: selectInfo.startStr,end: selectInfo.endStr,allDay: selectInfo.allDay,});
      }
    },handleEventClick(clickInfo) {
      if (
        confirm(
          `Are you sure you want to delete the event '${clickInfo.event.title}'`
        )
      ) {
        clickInfo.event.remove();
      }
    },handleEvents(events) {
      this.currentEvents = events;
    },};
</script>

package.json

{
  "name": "SPA-Starter","version": "1.0.0","license": "MIT","private": true,"scripts": {
    "serve": "vue-cli-service serve --open","s3": "vue-cli-service serve --open --port 3000","build": "vue-cli-service build","lint": "vue-cli-service lint"
  },"dependencies": {
    "@fullcalendar/daygrid": "^5.3.2","@fullcalendar/interaction": "^5.3.1","@fullcalendar/timegrid": "^5.3.1","@fullcalendar/vue": "^5.3.1","axios": "^0.18.0","buefy": "^0.8.20","bulma": "0.9.0","date-fns": "^1.29.0","leaflet": "^1.6.0","primeflex": "^2.0.0-rc.1","primeicons": "^4.0.0","primevue": "^2.0.5","v-tooltip": "^2.0.3","vue": "^2.5.17","vue-google-autocomplete": "^1.1.0","vue-html-to-paper": "^1.3.1","vue-js-modal": "^2.0.0-rc.3","vue-moment": "^4.1.0","vue-router": "^3.0.1","vue-toasted": "^1.1.28","vue2-leaflet": "^2.5.2","vue2-timepicker": "^1.1.4","vuex": "^3.0.1"
  },"devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1","@vue/cli-plugin-eslint": "^3.1.1","@vue/cli-service": "^3.1.1","@vue/eslint-config-prettier": "^4.0.0","babel-eslint": "^10.0.1","eslint": "^5.8.0","eslint-plugin-vue": "^5.0.0-0","node-sass": "^4.9.0","sass-loader": "^7.0.1","vue-template-compiler": "^2.5.17","style-resources-loader": "^1.2.1"
  }
}

解决方法

在注意到其他Vue版本正在使用的项目后，我将其Vue版本从2.5.17升级到2.6.11，从而解决了这个问题。

,

尝试以下方法：

import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

export default {
  components: {
    FullCalendar,// make the <FullCalendar> tag available
  },data() {
    return {
      calendarOptions: {
        plugins: [
          dayGridPlugin,timeGridPlugin,interactionPlugin,// needed for dateClick
        ],headerToolbar: {
          left: "prev,next today",center: "title",right: "dayGridMonth,timeGridWeek,timeGridDay",},initialView: "timeGridWeek",initialEvents: [],// alternatively,use the `events` setting to fetch from a feed
        editable: true,selectable: true,selectMirror: true,dayMaxEvents: true,weekends: true,select: this.handleDateSelect,eventClick: this.handleEventClick,eventsSet: this.handleEvents,/* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
      },currentEvents: [],};
  },methods: {
    handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends; // update a property
    },handleDateSelect(selectInfo) {
      let title = prompt("Please enter a new title for your event");
      let calendarApi = selectInfo.view.calendar;

      calendarApi.unselect(); // clear date selection

      if (title) {
        calendarApi.addEvent({
          id: createEventId(),title,start: selectInfo.startStr,end: selectInfo.endStr,allDay: selectInfo.allDay,});
      }
    },handleEventClick(clickInfo) {
      if (
        confirm(
          `Are you sure you want to delete the event '${clickInfo.event.title}'`
        )
      ) {
        clickInfo.event.remove();
      }
    },handleEvents(events) {
      this.currentEvents = events;
    },};
</script>