vue2中使用fullcalendar

前言

某天小胡和同事正在楼下翘着二郎腿喝咖啡，享受着下午阳光的沐浴，突然看见项目小组有消息，速来会议室有需求！！！

产品哔哩哔哩一大推的业务，作为一名不懂业务的小胡听得云里雾里，作为前端的小胡想，那不就是显示每月的每一天，并能够在某天添加相应指标，小胡心想：‘这还不简单，老夫直接梭哈开干’，

原本小胡想手写源码实现功能。
突然同事和他说，用插件呗。
小胡心想：这是小瞧我嘛，但是想想那微薄的工资，还是用第三方吧，节省时间
于是小胡阅读了好几篇相关文章，最终选择链接: fullcalendar

为什么使用fullcalendar

为什么要使用fullcalendar呢，其实也是有原因的，一方面因为它比较小，配置比较齐全，另一方面因为关于它的文章还是比较多的，也说明有坑的地方大佬们都踩过啦。

引入fullcalendar

本来小胡猜两个小时就能完成该页面的开发，谁曾想在引入fullcalendar踩了个大坑，弄了将近四小时，当然一部分原因因为小胡的电脑不行，每次下载需要好久，而且下了好几次都没有成功，翻找了一大推文章，都是差不多的引入方式，小胡没有去看官网的说明（因为小胡看英文好比看天文）而且每次尝试把package.json中的fullcalendar相关配置删掉，再次下载依然不行。

最终小胡还是决定去看官网，幸好小胡还认识几个关键词，
官网说明地址: https://fullcalendar.io/docs/vue
这一次小胡用淘宝镜像去下载果然成功啦，然后经过小胡的cv大法以及整合大法，最终完成该效果，如图

以下是所有代码，因为改页面有用到自己写的插件和AntDesign库，你们自己复制的话，注意注释掉

<template>
  <div class="container">
    <div class="search_container">
      <FilterBar
        :pFields="filterFields"
        :pJsonModel="jsonModel"
        :pShowBtns="true"
        :pShadow="false"
        @query="onQuery"
        @reset="onReset"
      >
      </FilterBar>
    </div>
    <div class="main_container">
      <FullCalendar :options="calendarOptions" ref="fullCalendar" />
    </div>
    <!-- 弹出层 -->
    <a-modal
      :title="dateTitle"
      :visible="dialogVisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      :maskClosable="false"
      @cancel="dialogVisible = false"
    >
      <a-textarea placeholder="请输入信息" :rows="4" v-model="fromInfo" />
    </a-modal>
  </div>
</template>
<script>
import FilterBar from "@/components/table/FilterBar";
import "@fullcalendar/core/vdom"; // solves problem with Vite
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import moment from "moment";
export default {
  components: {
    FullCalendar,
    FilterBar // make the <FullCalendar> tag available
  },
  data() {
    let filterFields = [
      {
        label: "指标名称",
        type: "str",
        name: "indexNameZh",
        placeholder: "请输入名称",
        maxLength: 20
      },
      {
        label: "指标分类",
        type: "str",
        name: "indexTypeId",
        widget: "SelectWidget",
        options: []
      }
    ];
    return {
      filterFields,
      filterJsonModel: {
        indexNameZh: ""
      },
      dateTitle: "",
      fromInfo: "",
      dialogVisible: false,
      confirmLoading: false,
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: "dayGridMonth",
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        locale: "zh-cn", // 切换语言，当前为中文
        eventColor: "#FFF", // 全部日历日程背景色
        eventClick: this.handleDateClick, //点击日程触发
        dateClick: this.handleDateClick, //点击日期触发
        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
        events: [],
        // {
        //     //  title:'标题',
        //     //  start: '事件开始事件',
        //     //  end: '事件结束事件'  这里要注意，end为可选参数，无end参数时该事件仅在当天展示
        //     //  backgroundColor: '#FDEBC9',  该事件的背景颜色
        //     //  borderColor: '#FDEBC9', 该事件的边框颜色
        //     //  textColor: '#F9AE26' 该事件的文字颜色
        // }

        initialDate: moment().format("YYYY-MM-DD"), // 自定义设置背景颜色时一定要初始化日期时间
        aspectRatio: 2.6, // 设置日历单元格宽度与高度的比例。
        headerToolbar: {
          // 日历头部按钮位置
          left: "today",
          center: "prevYear,prev title next,nextYear",
          right: ""
        },
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "日"
        }
      }
    };
  },
  mounted() {
    this.gedata();
  },
  methods: {
    gedata() {
      this.calendarOptions.events = [
        {
          title: "任务1",
          start: "2022-11-22",
          color: "‘#ffcc99"
        },
        {
          title: "任务2",
          start: "2022-11-12",
          color: "‘#ffcc99"
        }
      ];
    },

    handleEventClick(info) {
      console.log(info, "handleEventClick");
    },
    handleDateClick(info) {
      console.log(info, "handleDateClick");
      this.dialogVisible = true;
      this.fromInfo = "";
      this.dateTitle = info.dateStr;
    },
    calendarEventDropOrResize(info) {
      console.log(info, "calendarEventDropOrResize");
    },
    handleOk() {
      this.confirmLoading = true;
      this.dialogVisible = false;
      this.confirmLoading = false;
    },
    onQuery() {
      console.log("查询");
    },
    onReset() {
      console.log("重置");
    }
  }
};
</script>


<style scoped lang="less">
.container {
  width: 100%;
  padding-top: 24px;
  padding-left: 23px;
  padding-right: 24px;
  padding-bottom: 24px;
}
.search_container {
  padding-top: 24px;
  padding-left: 30px;
  padding-bottom: 1px;
  box-shadow: 0px 9px 22px 0px rgb(51 54 71 / 6%);
  background: #ffffff;
  border-radius: 4px;
  margin-bottom: 24px;
  box-sizing: border-box;
}
/deep/ .main_container {
  padding-top: 24px;
  padding-left: 30px;
  padding-right: 32px;
  padding-bottom: 11px;
  box-shadow: 0px 9px 22px 0px rgb(51 54 71 / 6%);
  height: calc(100% - 63px);
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  margin-bottom: 35px;
  box-sizing: border-box;
  .fc-button-primary:not(:disabled):active:focus,
  .fc-button-primary:not(:disabled).fc-button-active:focus,
  .fc-button:focus {
    box-shadow: none;
  }
  .fc .fc-button {
    height: 30px;
    line-height: 1.2em;
  }
  .fc .fc-toolbar-title {
    font-size: 1.2em;
  }
  .fc .fc-button .fc-icon {
    font-size: 1em;
  }
}
/deep/ .fc-header-toolbar {
  .fc-toolbar-chunk:nth-child(1) {
    .fc-button-primary {
      color: #fff;
      background-color: #6091fc;
      border-color: #6091fc;
    }
  }
  .fc-toolbar-chunk:nth-child(2) {
    display: flex;
    align-items: center;
    .fc-button-primary {
      background-color: transparent;
      color: #99a2b7;
      border: none;
      border-color: transparent;
      outline: none;
    }
    .fc-button-primary:hover {
      color: #6091fc;
    }
    .fc-button-primary:active {
      border-color: transparent !important;
    }

    .fc-button-primary:not(:disabled):active,
    .fc-button-primary:not(:disabled).fc-button-active {
      background-color: #fff;
      border: 1px solid #6091fc;
      color: #299bff;
    }
    .fc-button-primary:disabled,
    .fc-button-primary:disabled:hover {
      background-color: #f5f5f5;
      border-color: #d9d9d9;
      color: rgba(0, 0, 0, 0.25);
    }
  }
}
/deep/ .fc-col-header-cell {
  a {
    color: #505363;
    font-size: 16px;
    font-weight: 700;
  }
}
/deep/ .fc-daygrid-day-top {
  a {
    color: #424a5c;
  }
}
// /deep/ fc-toolbar-chunk:nth-child(2) {
//   .fc .fc-button-primary {
//     background-color: red;
//   }
// }
</style>