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

Question

I'm trying to use the timeGridWeek view of Fullcalendar Vue . I continually get the following error when:

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

I have the required plugins installed:

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

And am importing them as prescribed in the Demo App , but I always get that error.

I believe this is due to something with my local project: I am able to get the demo app working fine on it's own, as well as copying the process on another project. It has never worked for this project.

What can I try to do in order to resolve this? I've deleted node modules, reinstalled all packages via npm, build the project for production, no luck. My full Vue component and package.json are below:

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

Try this instead:

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

In my case, I have forgotten to mention registerPlugins in module file

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

We encountered the same bug and solved it by installing the same version of all fullcalendar packages.

In the case example above I see two versions (^5.3.2 and ^5.3.1), which may have resulted in incompatible plugins.