vue-fullcalendar 日历插件

最终效果：

 安装过程：

1、下载

npm install vue-fullcalendar

2、main.js引用

import FullCalendar from 'vue-fullcalendar'
Vue.use(FullCalendar)

3、vue中使用

<template>
  <div>
    <full-calendar
      :events="monthData"
      class="test-fc"
      first-day="1"
      locale="fr"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick"
      lang="zh"
    ></full-calendar>
  </div>
</template>

<script>
import { FullCalendar } from "vue-fullcalendar";
export default {
  data() {
    return {
      monthData: [
        {
          title: "调查活动", // 事件内容
          start: "2021-09-06", // 事件开始时间
          end: "2021-09-07", // 事件结束时间
          cssClass: "red" // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
        }
      ]
    };
  },
  methods: {
    // 选择月份
    changeMonth(start, end, current) {
      console.log(
        "changeMonth",
        start.format(),
        end.format(),
        current.format()
      );
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      console.log("eventClick", event, jsEvent, pos);
    },
    // 点击当天
    dayClick(day, jsEvent) {
      console.log("dayClick", day, jsEvent);
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      console.log("moreCLick", day, events, jsEvent);
    }
  },
  components: {
    "full-calendar": require("vue-fullcalendar")
  }
};
</script>
<style scoped>
.red {
  background: red;
}
.blue {
  background: blue;
}
</style>