vue对FullCalendar的使用

安装

		"@fullcalendar/core": "^4.3.1",
        "@fullcalendar/daygrid": "^4.3.0",
        "@fullcalendar/interaction": "^4.3.0",
        "@fullcalendar/timegrid": "^4.3.0",
        "@fullcalendar/vue": "^4.3.1",

封装FullCalendar

<template>
  <div>
    <FullCalendar
      class="demo-app-calendar"
      ref="fullCalendar"
      :allDaySlot="false"
      defaultView="timeGridWeek"
      :minTime="starttime"
      :maxTime="endtime"
      weekNumberTitle="周"
      :height="660"
      :header="{
        left: 'dayGridMonth,timeGridWeek,timeGridDay',
        center: ' title ',
        right: ' prev today next',
      }"
      :eventTimeFormat="{
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        meridiem: false,
        hour12: false, //设置时间为24小时
      }"
      :slotLabelFormat="{
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        meridiem: false,
        hour12: false, //设置时间为24小时
      }"
      :buttonText="{
        today: '回到今天',
        month: '月',
        week: '周',
        day: '日',
      }"
      timeFormat="H:mm"
      axisFormat="H:mm"
      :selectable="true"
      eventOrder="order"
      :firstDay="1"
      :displayEventTime="false"
      :displayEventEnd="false"
      :allDayDefault="false"
      locale="zh-cn"
      :weekNumbers="true"
      :customButtons="customButtons"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="calendarEvents"
      @eventRender="eventRenderfn"
      @eventClick="eventClickfn"
    />
  </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 {
  components: {
    FullCalendar, // 像使用自定义组件一样使用
  },
  props: {
    calendarEvents: Array,
    starttime: String,
    endtime: String,
    type: String,
  },
  data() {
    return {
      calendarApi: null, //api
      // 右侧按钮设置
      customButtons: {
        today: {
          text: "回到今天", // 按钮的展示文本
          click: this.todayClick, //方法
        },
        next: {
          click: this.nextClick,
        },
        prev: {
          click: this.prevClick,
        },
      },
      weekNumbers: true, //确定是否应在日历上显示周数。
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin], // 日历里展示的内容插件
      calendarWeekends: true, // 是否在任何日历视图中包含星期六/星期日列。
    };
  },
  // dom渲染完获取dom
  updated() {
    this.$nextTick(() => {
      if (this.type == "course") {
        this.addcolor();
      }
    });
  },
  mounted() {
    this.calendarApi = this.$refs.fullCalendar.getApi();
  },
  methods: {
    // 增加颜色
    addcolor() {
      var riqi = document.querySelector(".fc-button-group");
      var a = document.querySelector(".colorstatus");
      if (!a) {
        var colorstatus = document.createElement("div");
        colorstatus.className = "colorstatus";
        riqi.append(colorstatus);
        colorstatus.innerHTML =
          "<div class='statuitem'><span></span><span>未上课</span></div><div class='statuitem'><span></span><span>教师冲突</span></div><div class='statuitem'><span></span><span>今天</span></div><div class='statuitem'><span></span><span>无学员或学员请假</span></div><div class='statuitem'><span></span><span>已上课或已失效</span></div>";
      }
    },
    // 日历 事件渲染
    eventRenderfn(event) {
      event.el.innerHTML = event.event.title;
    },
    // 点击日期事件
    eventClickfn(event) {
      this.$emit("eventcon", event);
    },
    // 点击回到今日
    todayClick(mouseEvent, htmlElement) {
      this.calendarApi.today(); // 将日历移动到当前日期。
      this.calendarApi.getDate(); // 返回日期的日历的当前日期
      this.getvalue();
    },
    // 获取选择日期的值
    getvalue() {
      var defaultView = this.$refs.fullCalendar.getApi().view.type;
      var title = this.$refs.fullCalendar.getApi().view.title;
      var day = this.$refs.fullCalendar.getApi().view.currentStart;
      var Y = day.getFullYear();
      var M = day.getMonth() + 1;
      var D = day.getDate();
      var value = "";
      if (defaultView == "timeGridWeek") {
        value = this.getWeekYear();
      } else if (defaultView == "dayGridMonth") {
        value = Y + "-" + (M < 10 ? "0" + M : M);
      } else if (defaultView == "timeGridDay") {
        value = Y + "-" + (M < 10 ? "0" + M : M) + "-" + (D < 10 ? "0" + D : D);
      }
      this.$emit("prev", { value, defaultView });
    },
    // 右按钮
    nextClick(mouseEvent, htmlElement) {
      this.calendarApi.next();
      this.getvalue();
    },
    // 左按钮
    prevClick(start, end, timezone, callback) {
      this.calendarApi.prev();
      this.getvalue();
    },
    // 获取一年的第几周
    getWeekYear() {
      var calendarView = this.$refs.fullCalendar.getApi().view;
      var d1 = calendarView.activeEnd;
      var d2 = calendarView.activeStart;
      //下面是获取今年1月号是第几周
      var Y = d1.getFullYear();
      var resDate = Y + "-" + "01" + "-" + "01";
      var W = new Date(Date.parse(resDate)).getDay(); //今年的1月1号周几
      //下面是获取今天是本年第几天
      d2.setMonth(0);
      d2.setDate(1);
      var rq = d1 - d2;
      var s1 = Math.ceil(rq / (24 * 60 * 60 * 1000));

      //（今年的第一天在周数）/7 等于第几周
      var s2 = Math.ceil((s1 + W) / 7);
      return s2 - 1;
    },
  },
};
</script>
<style lang='scss'>
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
</style>