elementui日历组件实现可标记日历

这是最后实现的效果，需要用圈来标记日期，有红色的标记和黄色的标记，开始找了很多插件，但是没有找到合适的能实现效果了，最后看到了其他相似的例子实现了这个需求

       <el-calendar v-model="value" class="cal">
            <template slot="dateCell" slot-scope="{ date, data }">
              <p
                v-if="handleSelected(data.day) == '1'"
                class="calendar_circle1"
                @click="clickCalendar(data)"
              >
                {{ data.day.split("-").slice(2).join("-") }}
              </p>
              <p
                v-if="handleSelected(data.day) == '2'"
                class="calendar_circle2"
                @click="clickCalendar(data)"
              >
                {{ data.day.split("-").slice(2).join("-") }}
              </p>
              <p
                v-if="handleSelected(data.day) == '3'"
                class="calendar_circle3"
                @click="clickCalendar(data)"
              >
                {{ data.day.split("-").slice(2).join("-") }}
              </p>
            </template>
          </el-calendar>

这是日历的组件。

    handleSelected(day) {
      let flag = "1"; //默认显示为0
      // 没有交易年度 2深色有 3浅色无
      this.hasYearNot.forEach((item) => {
        if (item == day) {
          //判断显示数据
          flag = "3";
          return;
        }
      });
      this.hasYear.forEach((item) => {
        if (item == day) {
          //判断显示数据
          flag = "2";
          return;
        }
      });
      return flag;
    },

hasYearNot	hasYear这两个数组是需要被标记的日期。
后台需要返回的数据格式,需要后台标识好我们需要标记的日期。

//请求获取后台返回的数据，需要后台做好标识，哪个日期需要标记什么颜色
   getCal(val) {
      let month = new Date(val).getMonth() + 1;
      let year = new Date(val).getFullYear();
      getHomeNotice({ orgId: this.orgId, issue: `${year}-${month}` }).then(
        (res) => {
          for (let key in res.data) {
            if (res.data[key] == "1") {
              this.hasYearNot.push(key);
            } else if (res.data[key] == "2") {
              this.hasYear.push(key);
            }
          }
        }
      );
    }
{
	"status":200,
	"msg":"查询成功",
	"rel":true,"data":
	{"2021-06-20":"2",
	"2021-06-21":"2",
	"2021-06-22":"1"}
}

.cal ::v-deep.el-calendar-day .calendar_circle1 {
  margin: 0 auto;
  padding: 2px;
  text-align: center;
}
.cal ::v-deep.el-calendar-day .calendar_circle2 {
  border: 1px solid #DE4747;
  border-radius: 50%;
  margin: 0 auto;
  padding: 2px;
  text-align: center;
}

给不同的圈设置不同的样式。
ending~~~~~