使用vue+element实现纯前端的简易日历日程功能

实现效果

点击日历中的某一日期，可以进行日程编辑：


实现过程

<template>
  <div class="schedule-container">
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <div
          :class="data.isSelected ? 'is-selected' : ''"
          @click="calItem(data.day)"
        >
          <p>
            <!--这里原本有动态绑定的class，去掉-->
            {
   {
    data.day.split('-').slice(1).join('-') }}
            <br />
            <span
              :class="
                dealMyDate(data.day).grade == '紧急日程'
                  ? 'is-success'
                  : dealMyDate(data.day).grade == '一般日程'
                  ? 'is-common'
                  : 'is-danger'
              "
            >
              {
   {
    dealMyDate(data.day).content }}
            </span>
          </p>
        </div>
      </template>
    </el-calendar>
    <el-dialog
      :title