[英]FullCalendar Vue: viewType "timeGridWeek" is not available. Please make sure you've loaded all neccessary plugins
I'm trying to use the timeGridWeek view of Fullcalendar Vue .我正在尝试使用Fullcalendar Vue的timeGridWeek视图。 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.并按照Demo App 中的规定导入它们,但我总是收到该错误。
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.
我删除了节点模块,通过 npm 重新安装了所有包,构建了用于生产的项目,没有运气。 My full Vue component and
package.json
are below:我的完整 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 版本从2.5.17
升级到2.6.11
解决了这个问题。
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>
In my case, I have forgotten to mention registerPlugins
in module file就我而言,我忘记在模块文件中提及
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
]);
We encountered the same bug and solved it by installing the same version of all fullcalendar packages.我们遇到了同样的错误,并通过安装所有 fullcalendar 包的相同版本来解决它。
In the case example above I see two versions (^5.3.2 and ^5.3.1), which may have resulted in incompatible plugins.在上面的案例示例中,我看到两个版本(^5.3.2 和 ^5.3.1),这可能导致插件不兼容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.