今天在做项目的时候,在下载对应的插件的时候遇到了一些问题,版本的问题。
我克隆下的版本
可以看出版本还是比较低的,而今天在克隆项目的时候,并没有在意版本的问题,而是直接下载,导致
所下载的插件的版本都是最新的版本。导致项目无法跑起来。具体的版本差异化改动得看官方的文档。
代码
<template>
<div>
<FullCalendar
ref="fullCalendar"
defaultView="dayGridMonth"
locale="zh-cn"
:header="{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
}"
:buttonText="buttonText"
:plugins="calendarPlugins"
:weekends="calendarWeekends"
:events="getCalendarEvents"
:eventLimit="true"
eventLimitText="更多"
@dateClick="handleDateClick"
@eventClick="handleEventClick"
/>
</div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
name: "fullcalendar_page",
components: {
FullCalendar,
},
data() {
return {
buttonText: {
today: "今天",
month: "月",
week: "周",
day: "天",
list: "列表",
},
calendarPlugins: [
// plugins must be defined in the JS
dayGridPlugin,
timeGridPlugin,
interactionPlugin, // needed for dateClick
],
calendarWeekends: true,
calendarEvents: [
// initial event data
{
title: "Event Now",
start: new Date(),
color: "#215148",
},
],
calendarApi: null,
};
},
methods: {
getCalendarEvents(info, successCallback) {
const events = [
...this.calendarEvents,
{
title: info.startStr,
start: info.start.valueOf(),
},
];
successCallback(events);
},
toggleWeekends() {
this.calendarWeekends = !this.calendarWeekends; // update a property
},
gotoPast() {
this.calendarApi.gotoDate("2019-08-01"); // call a method on the Calendar object
},
handleDateClick(arg) {
if (confirm("Would you like to add an event to " + arg.dateStr + " ?")) {
this.calendarEvents.push({
// add new event data
title: "New Event",
start: arg.date,
allDay: arg.allDay,
});
}
this.calendarApi.refetchEvents();
},
handleEventClick(info) {
console.log(info);
alert("Event: " + info.event.title);
},
},
mounted() {
this.calendarApi = this.$refs.fullCalendar.getApi();
},
};
</script>
<style lang="less">
// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
</style>
关于插件引入css的问题
~@
这里面的css的样式也是插件。
也可以通过相对路径的方式进行引入:
@import "../node_modules/@fullcalendar/core/main.css";
@import "../node_modules/@fullcalendar/daygrid/main.css";
@import "../node_modules/@fullcalendar/timegrid/main.css";
这样看到,~@和../node_modules都能进行文件的引入,因为~@肯定是进行了文件的配置。
在node_modules文件夹下
都可以找到对应的css。
解下来我们一起来看下启动后的页面吧
后续还会对齐进行一些相应的改造。