frame/components/calendar.vue

<template>
  <div class="demo-app">
    <FullCalendar
      ref="fullCalendar"
      locale="zh-cn"
      firstDay="1"
      :defaultDate="defaultDate"
      weekNumberCalculation="ISO"
      :header="{
        left: 'prev',
        center: 'title',
        right: 'today ,next',
      }"
      :button-text="{
        today: '今天',
      }"
      :valid-range="{
        start: rangeStart,
        end: rangeEnd,
      }"
      :slot-event-overlap="false"
      defaultView="dayGridMonth"
      :plugins="calendarPlugins"
      :selectable="useDraft"
      :events="events"
      @select="drawSelect"
      :eventOrder="`start`"
      @eventClick="clickEvent"
    />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import _ from 'lodash';
export default {
  props: {
    year: { type: String, default: `${new Date().getFullYear()}` }, //当前日历的年份
    events: { type: Array, default: () => [] },
    useDraft: { type: Boolean, default: true },
    useEvent: { type: Boolean, default: true },
  },
  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
      ],
      // calendarEvents: [],
      planList: [],
      addTitle: '',
    };
  },
  methods: {
    handleDateClick(arg) {
      this.$emit('click', arg);
    },
    drawSelect(arg) {
      this.$emit('draft', arg);
    },
    clickEvent(arg) {
      if (this.useEvent) this.$emit('eventClick', arg);
    },
  },
  computed: {
    defaultDate() {
      return `${this.year}-01-01`;
    },
    rangeStart() {
      return `${this.year}-01-01`;
    },
    rangeEnd() {
      return `${this.year}-12-31`;
    },
  },
};
</script>
<style lang="less">
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
</style>