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

引入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-popoverv-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查看效果

基于Element UI Calendar实现日程提醒功能相关推荐

html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
element ui - el-select 添加可输入功能
element ui - el-select 可以支持输入功能场景思路方法场景 vue2 + element ui 的项目中,产品希望 el-select 可以支持输入功能,也就说用户既可以下 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
vue2 - 基于Element UI实现上传Excel表单数据功能
一.项目场景批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据二.实现功能展示点击导入excel ...
vue使用element ui实现下拉列表分页的功能！！！
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一 ...
基于UDP心跳监测及邮件提醒功能的看门狗实现
1. 背景在服务器应用程序中,为了能够及时检测到服务器程序崩溃,并重新启动服务器程序,所以,我们需要实现一个监测程序,持续检测服务器程序的运行状态. 2. 思路在服务器程序中,建立一个基于UDP的 ...
axure element ui素材_【Axure分享】基于Element UI的Axure Web组件
有一段时间没做过产品原型了,前一阵有一个web产品需要做原型,正好在搞前端,于是顺便把Element UI移植到Axure上,基本上实现了大部分的功能组件,部分过于繁琐的组件未实现. 自己觉得蛮满意的 ...
element ui表格data搜索重置功能
element ui表格搜索重置功能本地 1.html <el-input v-model.trim="inputname"></el-input> &l ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
Element UI表格行拖拽功能
效果 <template><div class="hello"><el-tablere ...

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

目录

引入Element UI

修改全局样式

编写calendar_demo.vue文件

修改src\router\index.js

启动服务，效果图

基于Element UI Calendar实现日程提醒功能相关推荐

最新文章

热门文章