vue日历/日程提醒/html5本地缓存功能


Posted in Javascript onSeptember 02, 2019

先上图

vue日历/日程提醒/html5本地缓存功能

功能:

1、上拉日历折叠,展示周

2、左右滑动切换月

2、“今天”回到今天;“+”添加日程

3、localStorage存储日程

index,html

<body>
<div id="app" v-cloak @mousedown="down" @mouseup="heightChange">


<!--日历-->


<div id="calendar">



<!-- 年份 月份 -->



<div class="year-month">




<span class="add" @click="eventAdd">+</span>




<span class="choose-yearMonth" >{{ currentYear }}-{{currentMonth}}</span>




<span class="today" @click="backToday">今天</span>



</div>



<div class="clear"></div>



<!-- 星期 -->



<ul class="weekdays">




<li style="color:red">日</li>




<li>一</li>




<li>二</li>




<li>三</li>




<li>四</li>




<li>五</li>




<li style="color:red">六</li>



</ul>



<!-- 日期 -->



<ul class="days" ref="daysBox">




<!--展示月-->




<li :style="{'display':showMonth==true?'block':'none'}" @touchstart="down" @touchend="move" v-for="day in days"> //移动端点击方法,可切换pc端点击方法,见下





<!--非本月日期,灰色字体-->





<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>





<!--本月日期,正常显示-->





<span v-else>






<!--今天,特殊标示-->






<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>






<!--非今天,正常显示-->






<span v-else>{{ day.getDate() }}</span>





</span>




</li>




<!--展示周-->




<li :style="{'display':showMonth==true?'none':'block'}" @mousedown="down" @mouseup="move_week" v-for="day in week_day"> //pc端点击方法,可切换移动端点击方法,见上





<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>





<span v-else>






<!--今天-->






<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>






<span v-else>{{ day.getDate() }}</span>





</span>




</li>




<li><i class="mui-icon mui-icon-arrowdown"></i></li>


 </ul>

</div>

<!-- 添加日程 -->

<div id="content" v-if="show">


<div class="nav">



<span class="back" @click="eventAdd_false">返回</span>



<span class="finish" @click="eventAdd_true(id)">完成</span>


</div>


<div class="mui-input-row">



<input type="text" placeholder="日程内容" ref="eventName"/>



<input type="text" placeholder="备注信息" ref="eventInfo"/>



<input type="text" list="cars" placeholder="担任角色" ref="eventRole"/>



<datalist id="cars">




<option value="经办人">




<option value="交办人">




<option value="其他">



</datalist>



<input type="text" v-model="getRemindTime" placeholder="设置提醒时间" @click="timeAdd"/>


</div>


<div class="overlay" v-if="selectTime">



<div id="curtain">




<div class="icon-shell">





<div class="icon-false" @click="setTime_false">X</div>





<div class="icon-true" @click="setTime_true"></div>




</div>




<div class="clear"></div>




<label >日





<input type="number" v-model="currentDay" min="0" />




</label>




<label >时





<input type="number" v-model="currentHour" min="0" />




</label>




<label >分





<input type="number" v-model="currentMinute" min="0" />




</label>



</div>


</div>

</div>

<!--选项卡-->

<div id="box">


<ul class="ul1">



<li v-for="(item,index) in tabtit" v-bind:class="{active:index == num}" @click="tab(index)">




{{item}}



</li>


</ul>


<ul class="ul2">



<li v-for="(main,index) in tabmain" v-show="index == num">




<div v-for="(date,index) in main">





<div class="clear"></div>





<div>{{date.eventName}}</div> <div class="keep-right">{{date.eventTime}}</div>





<div class="clear"></div>





<div>{{date.eventInfo}}</div>





<div class="clear"></div>





<div>{{date.eventRole}}</div> <div class="keep-right" @click="select(index)">...</div>





<div class="clear"></div>





<div class="overlay" v-if="index==selectIndex" @click="closeDiv"></div>





<div v-if="index==selectIndex" class="select-p">






<p>修改</p>






<p>...</p>






<p>...</p>






<p>...</p>






<p>...</p>





</div>




</div>



</li>


</ul>

</div>

<!--mui框架下底部选项卡

<nav class="mui-bar mui-bar-tab">

<a class="mui-tab-item">

<span class="mui-icon mui-icon-home"></span>

<span class="mui-tab-label">工作</span>

</a>

<a class="mui-tab-item">

<span class="mui-icon mui-icon-phone"></span>

<span class="mui-tab-label">角色</span>

</a>

<a class="mui-tab-item">

<span class="mui-icon mui-icon-email"></span>

<span class="mui-tab-label">事项圈</span>

<a class="mui-tab-item">

<span class="mui-icon mui-icon-gear"></span>

<span class="mui-tab-label">同事</span>

</a>

<a class="mui-tab-item mui-active">

<span class="mui-icon mui-icon-gear"></span>

<span class="mui-tab-label">日历</span>

</a>

</nav>-->

</div>
</body>

style.css

 

* {
box-sizing: border-box;
margin:0;
padding:0;
list-style:none;
}
a{
text-decoration: none;
}
ul {
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
background: #E8F0F3;
}
#calendar,#box{
width:100%;
margin: 0 auto;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
}
[v-cloak] {
display:none;
}
.year-month {
position: fixed;
width: 100%;
height:50px;
padding: 15px 0px;
background: #262626;
}
.add{
width: 15%;
float: left;
text-align: center;
color: white;
}
.choose-yearMonth{
position: absolute;
width: 70%;
float: left;
text-align: center;
color: white;
}
.today{
width: 15%;
text-align: center;
float: right;
color: white;
}
.choose-month {
text-align: center;
font-size: 1rem;
}
.arrow {
padding: 30px;
}
.arrow:hover {
background: rgba(100, 2, 12, 0.1);
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.weekdays {
padding-top:55px;
background-color: #FFFFFF;
display: flex;
flex-wrap: wrap;
color: #949494;
justify-content: space-around;
}
.weekdays2 {
width: 100%;
padding-top:55px;
background-color: #FFFFFF;
display: flex;
position: fixed;
flex-wrap: wrap;
color: #949494;
justify-content: space-around;
}
.weekdays li {
display: inline-block;
width: 13.6%;
text-align: center;
}
.weekdays2 li {
display: inline-block;
width: 13.6%;
text-align: center;
}
.days {
padding: 0;
background: #FFFFFF;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.days2 {
width: 100%;
position: fixed;
padding: 0;
background: #FFFFFF;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.days li {
list-style-type: none;
display: inline-block;
width: 14.2%;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
font-size: 1rem;
color: #000;
}
.days li .active {
padding: 6px 10px;
border-radius: 50%;
background: #00B8EC;
color: #fff;
}
.days li .other-month {
padding: 5px;
color: gainsboro;
}
.days li:hover {
background: #e1e1e1;
}
.li-hidden{
display:none;
}
.li-show{
display:block;
}
.ul1 {
overflow:hidden;
}
.ul1 li {
float:left;
margin:10px;
cursor:pointer;
width: calc(79%/3);
text-align: center;
}
.ul1 li:hover {
color:#00B8EC;
}
.ul2 {
width: 90%;
margin: 0 auto;
}
.ul2 li {
border:1px solid #ccc;
padding:10px;
width:100%;
height:1000px;
}
.keep-right{
float: right;
}
.select-p{
/* border: 1px solid black; */
line-height: 30px;
padding: 10px;
width: 50%;
position: absolute;
right: 6%;
background-color: white;
z-index: 3;
}
.select-p p:hover{
background-color: #E6E6FA;
}
.
.active {
color:#00B8EC;
}
/* 添加日程样式 */
#content{
height:80%;
position: absolute;
top: 0;
right: 10%;
bottom: 0;
left: 10%;
margin: auto;
background-color: wheat;
}
.nav{
width: 100%;
height:50px;
margin-bottom: 20px;
padding:20px;
}
.back{
width:15%;
height:30px;
line-height:30px;
text-align: center;
background-color: gray;
border-radius: 25px;
float: left;
color: white;
}
.finish{
width: 15%;
height:30px;
line-height:30px;
background-color: red;
border-radius: 25px;
text-align: center;
float: right;
color: white;
}
.overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,0.2);
z-index:2;
}
#curtain{
width:80%;
position: absolute;
right: 10%;
left: 10%;
margin: auto;
background-color:#fff;
border-radius:2px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
position:fixed;
bottom: 10%;
text-align:center;
}
.icon-shell{
width:80%;
margin: 0 auto;
}
.icon-true{
float: right;
width: 20px;
height: 30px;
border-bottom: 3px solid #00B8EC;
border-right:3px solid #00B8EC;
margin: 10px auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.icon-true:hover{
opacity: 0.5;
}
.icon-false{
float: left;
padding-top: 18px;
font-size: 1.8em;
color: red;
}
.icon-false:hover{
opacity: 0.5;
}
#curtain label{
text-transform: uppercase;
background-color: #f4f4f4;
width: 30%;
height: 40%;
font-size: 1em;
display: inline-block;
padding: 10px;
margin: 10% 0;
}
#curtain input{
display: block;
border: 0;
font: inherit;
font-size: 1em;
padding: 6px;
outline: none;
text-align: center;
width: 100%;
margin: 10px auto;
background-color:#fff;
}
.clear{
clear: both;
}

 time.js

new Vue({
el: '#app',
data: {
//日历
currentYear: 2019,//
lockYear:2019,//返回当前年
currentMonth: 1,//
lockMonth:1,//返回当前月
currentDay: 1,//
lockDay:1,//返回当前日
setDay:1,//取月份默认从一号开始取
currentWeek: 2,//周几
setWeek:1,
days: [],//每月天数
week_day:[],//每周天数
today_key:1,//取today所在week为第一个week_day
scroll:0,//滚动高度
dayScrollTop:0,//日历需要隐藏的高度
showMonth:true,//上下拉切换月和周
//日历滑动换月
startX:0,//触摸点
endX:0,//松开点
startY:0,
endY:0,
//添加提醒设置时间
currentHour:0,
currentMinute:0,
getRemindTime:null,
eventId:1,
//点击显示
show:false,
selectTime:false,
//选项卡
tabtit: ["已设置提醒", "创建时间", "最后发言时间"],
tabmain: [new Array(), new Array(), new Array()],
num: 0,
selectIndex:-1,
},
created() {
this.initData(null);
},
watch: { //渲染完后,获取高度
days(){
this.$nextTick(function(){
/* console.log(this.$refs.daysBox.offsetHeight,this.$refs.daysBox.offsetTop); */
var daysBoxHeight=this.$refs.daysBox.offsetHeight;
var daysBoxHidden=daysBoxHeight/6*3;
var daysTop=this.$refs.daysBox.offsetTop;
this.dayScrollTop=daysTop+daysBoxHidden;
}); 
},
},
methods: {
initData(cur) {
var date;
if (cur) {
date = new Date(cur);
} 
else {
date = new Date();
this.lockYear = date.getFullYear();
this.lockMonth = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
this.lockDay = date.getDate() <10?'0'+date.getDate():date.getDate();
}
this.currentDay = date.getDate() <10?'0'+date.getDate():date.getDate();//showMonth=false
this.currentWeek = date.getDay();
date.setDate(1);
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
/*this.currentWeek = date.getDay(); // 1...6,0*/
this.setWeek=date.getDay();
this.currentHour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.currentMinute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var str=this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
var set_str = this.formatDate(this.currentYear , this.currentMonth, 1);
/*console.log("today:" + str + "," + this.currentWeek);*/
this.days.length = 0;
this.week_day.length=0;
// 默认1号,从一号开始计算,负数代表上个月天数,超过本月天数为下月天数
for (var i = this.setWeek; i >= 0; i--) {
var d = new Date(set_str);
d.setDate(d.getDate() - i);
/* console.log(d); */
this.days.push(d); 
}
for (var i = 1; i <= 35 - this.setWeek-1 ; i++) {
var d = new Date(set_str);
d.setDate(d.getDate() + i);
/* console.log(d); */
this.days.push(d);
}
for (var i = this.currentWeek; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
/* console.log(d); */
this.week_day.push(d);
}
for (var i = 1; i <= 7 - this.currentWeek-1; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
/* console.log(d); */
this.week_day.push(d);
}
this.tabmain[0].length=0;
for(var i=0;i<localStorage.length-1;i++){
var key=localStorage.key(i);
var key_value=JSON.parse(localStorage.getItem(key));
/* console.log(key,key_value); */
this.tabmain[0].push(key_value);
/* console.log(this.tabmain[0].length); */
}
},
eventAdd(){
this.show=true; 
},
timeAdd(){
this.selectTime=true; 
},
backToday(){
this.initData(null);
},
pickPre(year=this.currentYear, month=this.currentMonth) {
// setDate(0); 上月最后一天
// setDate(35) date后35天,保证为下个月
var d = new Date(this.formatDate(year , month , 1));
d.setDate(0);
/*console.log(d);*/
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
this.currentYear=d.getFullYear();
this.currentMonth=d.getMonth() + 1;
},
pickNext(year=this.currentYear, month=this.currentMonth) {
var d = new Date(this.formatDate(year , month , 1));
d.setDate(35);
/*console.log(d);*/
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
this.currentYear=d.getFullYear();
this.currentMonth=d.getMonth() + 1;
},
pickPre_week(year=this.currentYear, month=this.currentMonth,day=this.currentDay) {
// setDate(0); 上月最后一天
// setDate(35) date后35天,保证为下个月
var d = new Date(this.formatDate(year , month , day));
d.setDate(d.getDate()-7);
/*console.log(d);*/
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,d.getDate()));
this.currentYear=d.getFullYear();
this.currentMonth=d.getMonth() + 1;
this.currentDay=d.getDate();
},
pickNext_week(year=this.currentYear, month=this.currentMonth,day=this.currentDay) {
var d = new Date(this.formatDate(year , month , day));
d.setDate(d.getDate()+7);
console.log(d);
this.initData(this.formatDate(d.getFullYear(),d.getMonth()+1,d.getDate()));
this.currentYear=d.getFullYear();
this.currentMonth=d.getMonth()+1;
this.currentDay=d.getDate();
console.log(this.currentYear,this.currentMonth,this.currentDay);
},
down(event){
this.startX=event.clientX;
this.startY=event.clientY;
},
move(event){
this.endX=event.clientX;
if((this.startX-this.endX)>0){
console.log('zuohua');
this.pickNext(this.currentYear, this.currentMonth);
}
if((this.startX-this.endX)<0){
this.pickPre(this.currentYear, this.currentMonth);
console.log('youhua');
}
/*alert('滑动成功');*/ 
},
move_week(event){
this.endX=event.clientX;
if((this.startX-this.endX)>0){
this.pickNext_week(this.currentYear, this.currentMonth);
}
if((this.startX-this.endX)<0){
this.pickPre_week(this.currentYear, this.currentMonth);
}
},
heightChange(){
this.endY=event.clientY;
if(this.scroll>0){
this.showMonth=false;
this.scroll=0;
}
if(this.scroll<0){
this.showMonth=true;
}
},
// 返回 类似 YYYY-MM-DD 格式的字符串
formatDate(year,month,day){
var y = year;
var m = month;
if(m<10) {
m = "0" + m;
}
var d = day;
if(d<10) {
d = "0" + d;
}
return y+"-"+m+"-"+d
},
eventAdd_false(){
this.show=false;
},
eventAdd_true(id=this.eventId){
/* var id = localStorage.getItem(this.eventId); */
var name=this.$refs.eventName.value;
var info=this.$refs.eventInfo.value;
var role=this.$refs.eventRole.value;
var time=this.getRemindTime;
if(name && info && role &&time){
var event={"eventName":name,"eventInfo":info,"eventRol":role,"eventTime":time}
localStorage.setItem(id,JSON.stringify(event));
/* console.log(localStorage.length); */
this.eventId++;
this.tabmain[0].push(event);
this.show=false;
/* alert('name'+':'+name +'info'+':'+info +'role'+':'+role +'time'+':'+time + '设置成功'); */
}
else{
alert('输入不能为空');
}
/* console.log(localStorage.getItem("eventId")); */
},
setTime_false(){
this.selectTime=false;
},
setTime_true(){
this.selectTime=false;
this.getRemindTime=this.currentYear + "-" +this.currentMonth + "-" +this.currentDay + " " +this.currentHour + ":" +this.currentMinute + ":00";
},
tab(index) {
this.num = index;
},
select(index){
this.selectIndex=index;
},
closeDiv(){
this.selectIndex=-1;
},
menu() {
this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
/* console.log(this.scroll,this.dayScrollTop); */
/* if (document.documentElement.scrollTop > 200) { 
alert('页面高度大于200执行操作')
} else {
alert('页面高度xiao于200执行操作')
} */
/* console.log(document.getElementsByClassName('days').offsetHeight);
console.log(document.documentElement.scrollTop) */
/* console.log(this.$refs.elements.value); */
},
eventScroll(){
if(this.scroll-this.dayScrollTop>0){
var date = new Date();
this.currentYear=date.getFullYear();
this.currentMonth = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
this.currentWeek=date.getDay();
for (var i = this.currentWeek; i >= 0; i--) {
date.setDate(date.getDate() - i);
/* console.log(d); */
this.week_day.push(date);
}
this.showMonth=false;
/* alert('ok'); */
}
else{
}
}
},//methods
mounted() {
window.addEventListener('scroll', this.menu);
},
destroyed () {
window.removeEventListener('scroll', this.menu)
},
});///new Vue

总结

以上所述是小编给大家介绍的vue日历/日程提醒/html5本地缓存,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
vue 组件简介
Jul 31 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 #Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 #Javascript
layui数据表格跨行自动合并的例子
Sep 02 #Javascript
Vue form表单动态添加组件实战案例
Sep 02 #Javascript
小程序和web画三角形实现解析
Sep 02 #Javascript
vue-cli随机生成port源码的方法
Sep 02 #Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
php强制下载文件函数
2016/08/24 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
laravel5.6实现数值转换
2019/10/23 PHP
激活 ActiveX 控件
2006/10/09 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
深入理解Promise.all
2018/08/08 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
使用python实现扫描端口示例
2014/03/29 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
Python matplotlib可视化实例解析
2020/06/01 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
模特职业生涯规划范文
2014/02/26 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL