fullcalendar的版本问题

今天在做项目的时候,在下载对应的插件的时候遇到了一些问题,版本的问题。

我克隆下的版本

可以看出版本还是比较低的,而今天在克隆项目的时候,并没有在意版本的问题,而是直接下载,导致

所下载的插件的版本都是最新的版本。导致项目无法跑起来。具体的版本差异化改动得看官方的文档。

代码

<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。

解下来我们一起来看下启动后的页面吧

后续还会对齐进行一些相应的改造。