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

  　　
 　　　　 　　　　
 　　　　　　 　　　　　　
 　　　　　　　　+ 　　　　　　　　{{ currentYear }}-{{currentMonth}} 　　　　　　　　今天 　　　　　　
 　　　　　　
 　　　　　　 　　　　　　
 　　　　　　　　
日
 　　　　　　　　
一
 　　　　　　　　
二
 　　　　　　　　
三
 　　　　　　　　
四
 　　　　　　　　
五
 　　　　　　　　
六
 　　　　　　
 　　　　　　 　　　　　　
 　　　　　　　　 　　　　　　　　
 //移动端点击方法，可切换pc端点击方法，见下 　　　　　　　　　　 　　　　　　　　　　{{ day.getDate() }} 　　　　　　　　　　 　　　　　　　　　　 　　　　　　　　　　　　 　　　　　　　　　　　　{{ day.getDate() }} 　　　　　　　　　　　　 　　　　　　　　　　　　{{ day.getDate() }} 　　　　　　　　　　 　　　　　　　　
 　　　　　　　　 　　　　　　　　
 //pc端点击方法，可切换移动端点击方法，见上 　　　　　　　　　　{{ day.getDate() }} 　　　　　　　　　　 　　　　　　　　　　　　 　　　　　　　　　　　　{{ day.getDate() }} 　　　　　　　　　　　　{{ day.getDate() }} 　　　　　　　　　　 　　　　　　　　
 　　　　　　　　
 　　　　　
 　　
 　　 　　
 　　　　
 　　　　　　返回 　　　　　　完成 　　　　
 　　　　
 　　　　　　 　　　　　　 　　　　　　 　　　　　　 　　　　　　 　　　　
 　　　　
 　　　　　　
 　　　　　　　　
 　　　　　　　　　　
X
 　　　　　　　　　　
 　　　　　　　　
 　　　　　　　　
 　　　　　　　　日 　　　　　　　　　　 　　　　　　　　 　　　　　　　　时 　　　　　　　　　　 　　　　　　　　 　　　　　　　　分 　　　　　　　　　　 　　　　　　　　 　　　　　　
 　　　　
 　　
 　　 　　
 　　　　
 　　　　　　
 　　　　　　　　{{item}} 　　　　　　
 　　　　
 　　　　
 　　　　　　
 　　　　　　　　
 　　　　　　　　　　
 　　　　　　　　　　
{{date.eventName}}
{{date.eventTime}}
 　　　　　　　　　　
 　　　　　　　　　　
{{date.eventInfo}}
 　　　　　　　　　　
 　　　　　　　　　　
{{date.eventRole}}
...
 　　　　　　　　　　
 　　　　　　　　　　
 　　　　　　　　　　
 　　　　　　　　　　　　
修改
 　　　　　　　　　　　　
...
 　　　　　　　　　　　　
...
 　　　　　　　　　　　　
...
 　　　　　　　　　　　　
...
 　　　　　　　　　　
 　　　　　　　　
 　　　　　　
 　　　　
 　　
 　　 　　

 * { 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; }

 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()>= 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;i0){ 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>= 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