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 ponent 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 {
  ponents: {
    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-autoplete": "^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-piler": "^2.5.17",
    "style-resources-loader": "^1.2.1"
  }
}

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 ponent 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 {
  ponents: {
    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-autoplete": "^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-piler": "^2.5.17",
    "style-resources-loader": "^1.2.1"
  }
}

• javascript
• vue.js
• fullcalendar
• fullcalendar-5

Share Improve this question Follow asked Sep 23, 2020 at 0:02 LadybroLadybro 80622 gold badges1111 silver badges3333 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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 {
  ponents: {
    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>

I solved this by upgrading my Vue version from 2.5.17 to 2.6.11 after noticing the other projects that it worked on were using this version.

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 inpatible plugins.

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
]);