vue2项目使用FullCalendar日历组件，实现获取某年的排除节假日及其周末的日期功能

背景

项目需求：需要经过图形界面化获取经过选择某一年的日排除节假日及周末的日期；或则勾选或取消勾选不需要的日期

使用前提条件

安装FullCalendar日历组件，其安装命令如下

npm install --save @fullcalendar/moment
npm install --save @fullcalendar/core
npm install --save @fullcalendar/vue 
npm install --save @fullcalendar/daygrid
npm install --save @fullcalendar/multimonth

template里的代码

<template>
  <div class="main">
    <h1>
        fullcalendar年日历例子
    </h1>
    <FullCalendar ref="funllCalendarRef" 	:options="calendarOptions" >
    </FullCalendar>
    <div class="button">
      <el-button type="primary" @click="getSelectHandle">获取已经选择的数据</el-button>
    </div>
  </div>
</template>

script里的代码

说明：holidayData节假日的数据目前写死的一个js文件返回的常量，根据具体接口请求数据并根据数据显示不同的样式

import FullCalendar from "@fullcalendar/vue";
import zhcn from "@fullcalendar/core/locales/zh-cn"; //中文
import momentPlugin from "@fullcalendar/moment"; //时间格式化，但是要先npm i moment
import multiMonthPlugin from '@fullcalendar/multimonth'
import moment from 'moment'
import {
    holidayData } from '@/data/holidayData.js'
export default {
   
  components: {
   
    FullCalendar,
  },
  data() {
   
    return {
   
      myCalendar: null,
      calendarOptions: {
   
        plugins: [multiMonthPlugin],
        initialView: 'multiMonthYear',
        locale: zhcn, //中文包
        customButtons: {
    
          // 全部复选框选择
          selectAllButton: {
    text: "排除周六日节假日全选", click: this.handleSelectAllButton, style: '{ background-color: #409EFF }' },
          // 取消全部复选框选择
          cancelSelectAllButton: {
    text: "取消全选", click: this.handleCancelSelectAllButton, style: '{ background-color: #E6A23C }' },
          prevYearCustom: {
   
            text: '上一年',
            click: () => {
   
              this.prevYearHandl();
            }
          },
          nextYearCustom: {
   
            text: '下一年',
            click: () => {
   
              this.nextYearHandl();
            }
          },
        }, //自定义按钮
        // buttonText: {},
        headerToolbar: {
   
          left: 'selectAllButton cancelSelectAllButton',
          center: 'title',
          // right: 'multiMonthYear,dayGridMonth,timeGridWeek'
          // right: 'today prev next',
          // right: 'today prevYear nextYear',
          right: 'today prevYearCustom nextYearCustom',
        },
        events: [
          {
    title: 'Event 1', date: '2024-06-01', id: '1', completed: false },
          {
    title: 'Event 2', date: '2024-06-02', id: '2', completed: true }
          // more events...
        ],
        eventContent: this.renderEventContent.bind(this),
        // 今日上一年视图
        prevYear: this.prevYearHandl,
        // 今日下一年视图
        nextYear: this.nextYearHandl,
        // eventClick: this.handleDelete, //事件点击
      },
      // year: 2024, // 你可以根据需要更改这个年份  
      year: moment().format('YYYY'), // 你可以根据需要更改这个年份  
      // 全年的日期
      dates: [],
    };
  },
  mounted() {
   
    this.myCalendar = this.$refs.funllCalendarRef.getApi(); //获取日历Api
    window.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    // this.handleGetDate()
    this.generateDatesForYear(this.year)
    this.getEventList(this.dates);
    let calendarApi = this.$refs.funllCalendarRef.getApi()
  },
  methods: {
   
    // 获取全年日期
    generateDatesForYear(year) {
     
      const startOfYear = moment(`${
     year}-01-01`, 'YYYY-MM-DD');  
      const endOfYear = moment(`${
     year}-12-31`, 'YYYY-MM-DD').endOf('day');  
      // 先清空在加入
      this.dates = []
      let currentDate = startOfYear.clone();  
      while (currentDate.isBefore(endOfYear)) {
     
        this.dates.push(currentDate.clone().format('YYYY-MM-DD')); // 使用clone()来避免在循环中修改原始moment对象  
        currentDate.add(1, 'days');  
      }  
      return this.dates
    },
    handleGetDate(){
   
      let num= Math.ceil(365/7)*7
      let start=new Date(moment().format('yyyy-01-01')).getDay()
      let YYYY = this.year
      let dateArr=[],time=moment().