FullCalendar Vue：viewType "timeGridWeek" 不可用。请确保您已加载所有必要的插件
FullCalendar Vue: viewType "timeGridWeek" is not available. Please make sure you've loaded all neccessary plugins
我正在尝试使用 timeGridWeek view of 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 中的规定导入它们，但我总是遇到该错误。
我相信这是由于我的本地项目造成的：我 能够让演示应用程序自己正常工作，并将该过程复制到另一个项目.它从来没有为这个项目工作过。
我该怎么做才能解决这个问题？我删除了节点模块，通过 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"
}
}
试试这个：
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>
我注意到它工作的其他项目正在使用这个版本后，通过将我的 Vue 版本从 2.5.17 升级到 2.6.11 解决了这个问题。
就我而言，我忘记在模块文件
中提及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
]);
我们遇到了同样的错误并通过安装所有 fullcalendar 包的相同版本解决了。
在上面的案例中，我看到了两个版本（^5.3.2 和 ^5.3.1），这可能导致插件不兼容。
我正在尝试使用 timeGridWeek view of 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 中的规定导入它们，但我总是遇到该错误。
我相信这是由于我的本地项目造成的：我 能够让演示应用程序自己正常工作，并将该过程复制到另一个项目.它从来没有为这个项目工作过。
我该怎么做才能解决这个问题？我删除了节点模块，通过 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"
}
}
试试这个：
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>
我注意到它工作的其他项目正在使用这个版本后，通过将我的 Vue 版本从 2.5.17 升级到 2.6.11 解决了这个问题。
就我而言，我忘记在模块文件
中提及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
]);
我们遇到了同样的错误并通过安装所有 fullcalendar 包的相同版本解决了。
在上面的案例中，我看到了两个版本（^5.3.2 和 ^5.3.1），这可能导致插件不兼容。