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 相关文章推荐
jQuery遍历Table应用示例
Apr 09 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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中的Reload操作
2016/12/12 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
js同时按下两个方向键
2007/12/01 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
面试后感谢信
2014/02/01 职场文书
安全生产实施方案
2014/02/23 职场文书
小学评语大全
2014/04/22 职场文书
军训拉歌口号
2014/06/13 职场文书
诚实守信演讲稿
2014/09/01 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
校园安全教育心得体会
2016/01/15 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电