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

Question

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

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 中的规定导入它们，但我总是收到该错误。

我认为，这是由于一些与我的本地项目：我能得到演示程序工作正常，在它自己的，以及复制另一个项目的过程。 它从来没有在这个项目中工作过。

我可以尝试做些什么来解决这个问题？ 我删除了节点模块，通过 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"
  }
}

Answer 1

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

Answer 2

试试这个：

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>

Answer 3

就我而言，我忘记在模块文件中提及registerPlugins

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';

FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin,
  timeGridPlugin,
  listPlugin,
  interactionPlugin
]);

Answer 4

我们遇到了同样的错误，并通过安装所有 fullcalendar 包的相同版本来解决它。

在上面的案例示例中，我看到两个版本（^5.3.2 和 ^5.3.1），这可能导致插件不兼容。