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数组去重方法思路及代码
Mar 26 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
简单实现js上传文件功能
Aug 21 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
vue登录注册实例详解
Sep 14 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP的开合式多级菜单程序
2006/10/09 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python实现数据写入excel表格
2018/03/25 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
华为慧通面试题
2012/09/11 面试题
老人祝寿主持词
2014/03/28 职场文书
社团活动总结格式
2014/08/29 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android