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
总结