frame/components/calendar.vue

<template>
  <div class="demo-app">
    <FullCalendar
      ref="fullCalendar"
      locale="zh-cn"
      firstDay="1"
      :editable="false"
      :droppable="false"
      :eventLimit="eventLimit"
      :defaultDate="defaultDate"
      weekNumberCalculation="ISO"
      :customButtons="btn"
      :header="headers"
      :button-text="{
        today: '今天',
      }"
      :valid-range="{
        start: rangeStart,
        end: rangeEnd,
      }"
      :slot-event-overlap="false"
      defaultView="dayGridMonth"
      :plugins="calendarPlugins"
      :selectable="useDraft"
      :events="event"
      @select="drawSelect"
      :eventOrder="`start`"
      @eventClick="clickEvent"
      :views="views"
      :displayEventEnd="true"
      :displayEventTime="true"
      :allday="true"
    />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
var moment = require('moment');
import _ from 'lodash';
export default {
  props: {
    year: { type: null, default: `${new Date().getFullYear()}` }, //当前日历的年份
    events: { type: Array, default: () => [] },
    useDraft: { type: Boolean, default: true },
    useEvent: { type: Boolean, default: true },
    selfBtn: { type: Object, default: () => {} },
    eventLimit: { type: null, default: false },
    vacation: { type: Array, default: () => [] },
  },
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data: function() {
    return {
      form: { isAllDay: true },
      dialog: false,
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        // timeGridPlugin,
        interactionPlugin, // needed for dateClick
      ],
      planList: [],
      addTitle: '',
      headers: {
        left: 'prev',
        center: 'title',
        right: 'today ,next',
      },
      btn: {},
      views: {
        dayGridMonth: {
          eventLimit: _.clone(this.eventLimit),
        },
      },
    };
  },
  methods: {
    handleDateClick(arg) {
      this.$emit('click', arg);
    },
    drawSelect(arg) {
      arg.endStr = moment(arg.endStr)
        .subtract(1, 'days')
        .format('YYYY-MM-DD');
      // let is_possbile = this.$checkDate({ ...arg, vacation: this.vacation });
      let is_possbile = this.$checkDate(arg.startStr, arg.endStr, this.vacation);
      if (is_possbile == true) this.$emit('draft', arg);
      else this.$message.error('您选择的时间段与假期重合,请您重新选择');
    },
    clickEvent(arg) {
      if (this.useEvent) this.$emit('eventClick', arg);
    },
    setBtn() {
      let selfBtn = _.cloneDeep(this.selfBtn);
      let keys = Object.keys(selfBtn);
      for (const key of keys) {
        let { position, ...info } = selfBtn[key];
        selfBtn[key] = { ...info };
        if (position === 'left') this.headers.left = `${this.headers.left}, ${key}`;
        else this.headers.right = `${this.headers.right}, ${key}`;
      }
      this.$set(this, `btn`, selfBtn);
    },
  },
  computed: {
    defaultDate() {
      return `${this.year}-01-01`;
    },
    rangeStart() {
      return `${this.year}-01-01`;
    },
    rangeEnd() {
      return `${this.year}-12-31`;
    },
    event() {
      let nv = this.vacation.map(i => {
        let object = JSON.parse(JSON.stringify(i));
        object.end = moment(i.end)
          .add(1, 'days')
          .format('YYYY-MM-DD');
        return object;
      });
      let ne = this.events.map(i => {
        let object = JSON.parse(JSON.stringify(i));
        object.end = moment(i.end)
          .add(1, 'days')
          .format('YYYY-MM-DD');
        return object;
      });
      return nv.concat(ne);
    },
  },
  watch: {
    selfBtn: {
      immediate: true,
      handler(val) {
        if (val) this.setBtn();
      },
    },
  },
};
</script>
<style lang="less">
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
</style>