1、效果展示

1.1、添加日程

添加日程.png

1.2、显示已添加了的日程，并且在日历上标注

效果图.png

1.3、点击标注，弹出日程内容以及重要程度

查看.png

2、需求分析

在新项目中，需要在首页做个日历展示以及实现添加，查看，修改，删除日程的功能，ElementUI组件库中有一个calendar组件可以拿来进行复用。

3、后台接口查看

一开始后台那边没有返回日期，在日历上进行标注的过程必须是需要后台那边返回添加了日程的时间过来的，前端这边再去将带有日程的时间存进一个数组，然后再去单独渲染到日历上去。

列表返回数据.png

4、标注渲染问题的难点

这里可以有很多不同的方式去实现这个难点，我这边是和后台开发人员协商好，前端传入年月给后台，然后后台返回那一个月份所有添加了日程的数据给我，然后通过给上一个月以及下一个月添加点击事件，通过事件的触发来完成获取年月的信息，从而调一次接口，拿到当月的数据。

4、代码实现过程

4.1、日历的初步渲染

这里的calendar_nolabel类是没有做标注的时间部分，而calendar_label是做了标注的部分

4.2、添加日程按钮

    + 添加日程

4.3、封装日程弹窗组件

这里有一点需要注意，在打开的时候我添加了重置表单的操作，这里在使用重置的时候需要使用this.$nextTick(()=>{})，因为这一步操作需要在DOM渲染完成时去执行。

4.4、添加子组件弹窗

将弹窗加入到日历组件代码中去，在日历组件中通过获取子组件的handleOpen()方法，弹出日程框。

引入组件

import AddCanlendar from "./canlendarDialog";

弹窗组件

4.5、开始渲染当月日程并做标注

通过map遍历，取每个元素节点下的日期，然后返回到一个新数组中去。

// 获取当月的日程信息
    handleSchedule() {
      // 将日期传入接口，判断当前时间是否有日程
      getScheduleList(this.moment(this.value).format("YYYY-MM"))
        .then((res) => {
          if (res.code == 0) {
            // this.label.push(res.data);
            this.label = res.data.map((item) => {
              return item.scheduleDate;
            });
            this.notLabel = res.data;
            this.loading = false;
          }
        })
        .catch();
    },

通过遍历数组，判断日期，有标注的日程数组中有数据的话返回flag为2，否则就是默认的1。这里可以继续多重判断，比如可以根据重要的等级程度去返回不同的值去做渲染。

    handleSelected(day) {
      let flag = "1"; 
      this.label.forEach((item) => {
        if (item == day) {
          flag = "2";
          return;
        }
      });
      return flag;
    },

4.6、给上一月，下一月按钮添加点击事件

 created() {
    this.$nextTick(() => {
      // 点击上个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        this.value = this.moment(this.value).format("YYYY-MM");
        console.info(this.value);
        this.handleSchedule();
      });
      // 点击今天
      let currBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      currBtn.addEventListener("click", () => {
        this.value = this.moment(this.value).format("YYYY-MM");
        console.info(this.value);
        this.handleSchedule();
      });
      // 点击下个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        this.value = this.moment(this.value).format("YYYY-MM");
        console.info(this.value);
        this.handleSchedule();
      });
    });
  },

后台管理系统项目使用ElementUI组件库完成在日历上的某一天添加日程的功能