基于Element UI Calendar实现日程提醒功能

目录

• 一：引入Element UI
• 二：修改全局样式
• 三：编写calendar_demo.vue文件
• 四：修改src\router\index.js
• 五：启动服务，效果图

引入Element UI

cnpm i element-ui

打开main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 共通样式 去除浏览器的一些默认样式等
import '../static/css/common.css';

修改全局样式

创建common.css

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
  margin: 0;
  padding: 0;
  border: 0;
  /* font-size: 100%; */
  font-weight: normal;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  font-family: "Microsoft YaHei";
  font-size: 16px;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* custom */
a {
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}

li {
  list-style: none;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 10px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 10px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

html,
body {
  width: 100%;
}

body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

编写calendar_demo.vue文件

<template>
  <div class="test01">
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{date, data}">
        <el-popover
          v-if="reversedMessage(data.day)"
          placement="top-start"
          width="200"
          trigger="hover">
          <div class="el-popover__title day-title">今日提醒</div>
          <div class="el-popover__title" style="text-align: center">{{data.day}}</div>
          <div v-for="(item, index) in reversedMessage(data.day).data" :key="index">
            <el-row>
              <el-col :span="6">时间：</el-col>
              <el-col :span="18">{{item.startDate.substring(11)}} - {{item.endDate.substring(11)}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">标题：</el-col>
              <el-col :span="18">{{item.title}}</el-col>
            </el-row>
            <br v-if="index != reversedMessage(data.day).data.length - 1"/>
          </div>
          <div slot="reference" class="test" @click="dayClick(data.day)">
            <div class="jcs-day">{{ data.day.split('-').slice(2).join('-') }}</div>
            <div :class="[reversedMessage(data.day)?'jcs':'']"></div>
          </div>
        </el-popover>
        <div v-else class="test" @click="dayClick(data.day)">
          <div class="jcs-day">{{ data.day.split('-').slice(2).join('-') }}</div>
          <div :class="[reversedMessage(data.day)?'jcs':'']"></div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
  export default {
    name: "CalendarDemo",
    data() {
      return {
        cData: [
          {
            "data": [
              {
                "content": "测试01",
                "createDate": "2021-02-01 10:00:27",
                "createUser": "EB3764DA0D4B0A42A7C2EE176116748F",
                "endDate": "2021-02-02 11:59:59",
                "id": "c0423050ea6352d295e995a2d5e40b94",
                "isDelete": 0,
                "startDate": "2021-02-02 01:00:00",
                "title": "测试01"
              },
              {
                "content": "测试02",
                "createDate": "2021-02-01 12:00:27",
                "createUser": "EB3764DA0D4B0A42A7C2EE176116748F",
                "endDate": "2021-02-02 22:59:59",
                "id": "c0423050ea6352d295e995a2d5e40b94",
                "isDelete": 0,
                "startDate": "2021-02-02 09:00:00",
                "title": "测试02"
              }
            ],
            "date": "2021-02-02"
          },
          {
            "data": [
              {
                "content": "测试测试测试",
                "createDate": "2021-02-01 10:00:27",
                "createUser": "EB3764DA0D4B0A42A7C2EE176116748F",
                "endDate": "2021-02-03 23:59:59",
                "id": "c0423050ea6352d295e995a2d5e40b94",
                "isDelete": 0,
                "startDate": "2021-02-03 00:00:00",
                "title": "测试"
              }
            ],
            "date": "2021-02-03"
          },
          {
            "data": [
              {
                "content": "测试01测试01测试01测试01测试01",
                "createDate": "2021-02-01 10:25:27",
                "createUser": "EB3764DA0D4B0A42A7C2EE176116748F",
                "endDate": "2021-02-18 21:00:00",
                "id": "ee0851a0696089665e7c6c92c98185a7",
                "isDelete": 0,
                "startDate": "2021-02-18 00:00:00",
                "title": "测试01测试01测试01测试01"
              }
            ],
            "date": "2021-02-18"
          }
        ],
      }
    },
    methods: {
      reversedMessage: function (val) {
        return this.cData.find(function (data) {
          return data.date === val;
        })
      },
      dayClick(val) {
        alert(val)
      }
    }
  }
</script>

<style scoped>
  .jcs {
    background: #fb8c8c;
    position: absolute;
    top: 10%;
    right: 5%;
    width: 10px;
    height: 10px;
    border-radius: 10px;
  }

  .test {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .el-calendar-day {
  }

  .jcs-day {
    position: absolute;
    top: 35%;
    left: 40%;

  }
  .day-title{
     font-size: 16px;
     letter-spacing: 1px;
     color: #1aae50;
     text-align: center;
     border-bottom: 1px solid #e6e6e6;
     padding: 0 0 6px 0;
     margin: 0 0 10px 0;
  }
  .test01{
    width: 640px;
    margin-left: 200px;
  }
</style>

修改src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import CalendarDemo from '@/pages/calendar_demo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test01',
      name: 'CalendarDemo',
      component: CalendarDemo
    }
  ]
})

启动服务，效果图

浏览器访问http://localhost:8080/#/test01查看效果