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

功能：

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

2、左右滑动切换月

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

3、localStorage存储日程

index,html

　　

　　　　　　

• 
  　　　　　　　　
• 日
• 
  　　　　　　　　
• 一
• 
  　　　　　　　　
• 二
• 
  　　　　　　　　
• 三
• 
  　　　　　　　　
• 四
• 
  　　　　　　　　
• 五
• 
  　　　　　　　　
• 六
• 
  　　　　　　

　　　　　　

　　　　　　　　<li :style="{‘display’:showMonth==true?‘block’:‘none’}" @touchstart=“down” @touchend=“move” v-for=“day in days”> //移动端点击方法，可切换pc端点击方法，见下
　　　　　　　　　　
　　　　　　　　　　{{ day.getDate() }}

　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　{{ day.getDate() }}

　　　　　　　　　　　　{{ day.getDate() }}
　　　　　　　　　　
　　　　　　　　

　　　　　　　　<li :style="{‘display’:showMonth==true?‘none’:‘block’}" @mousedown=“down” @mouseup=“move_week” v-for=“day in week_day”> //pc端点击方法，可切换移动端点击方法，见上
　　　　　　　　　　{{ day.getDate() }}
　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　{{ day.getDate() }}
　　　　　　　　　　　　{{ day.getDate() }}
　　　　　　　　　　
　　　　　　　　
　　　　　　　　

• 
  　　　　　
  　　

  
  　　

  
  　　　　

  
  　　　　　　<span class=“back” @click=“eventAdd_false”>返回
  　　　　　　<span class=“finish” @click=“eventAdd_true(id)”>完成
  　　　　

  
  　　　　

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

  
  　　　　　　　　

  
  　　　　　　　　　　<div class=“icon-false” @click=“setTime_false”>X

  
  　　　　　　　　　　<div class=“icon-true” @click=“setTime_true”>

  
  　　　　　　　　
  
  　　　　　　　　
  
  　　　　　　　　 日
  　　　　　　　　　　
  　　　　　　　　
  　　　　　　　　 时
  　　　　　　　　　　
  　　　　　　　　
  　　　　　　　　 分
  　　　　　　　　　　
  　　　　　　　　
  　　　　　　
  　　　　
  　　

  
  　　

  
  　　　　

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

  
  　　　　

  • 
    　　　　　　
  • 
    　　　　　　　　
    
    　　　　　　　　　　

    
    　　　　　　　　　　

    {{date.eventName}}

    {{date.eventTime}}

    
    　　　　　　　　　　

    
    　　　　　　　　　　

    {{date.eventInfo}}

    
    　　　　　　　　　　
  {{date.eventRole}}
  <div class=“keep-right” @click=“select(index)”>…
  　　　　　　　　　　
  
  　　　　　　　　　　<div class=“overlay” v-if=“index==selectIndex” @click=“closeDiv”>
  　　　　　　　　　　
  
  　　　　　　　　　　　　

  修改

  
  　　　　　　　　　　　　

  …

  
  　　　　　　　　　　　　

  …

  
  　　　　　　　　　　　　

  …

  
  　　　　　　　　　　　　

  …

  
  　　　　　　　　　　
  
  　　　　　　　　
  　　　　　　
  　　　　
  　　

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

  
  　　
  　　
  　　工作
  　　
  　　
  　　
  　　角色
  　　
  　　
  　　
  　　事项圈
  　　
  　　
  　　同事
  　　
  　　
  　　
  　　日历
  　　
  　　
  –>
  　　

  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;vardaysBoxHidden=daysBoxHeight/6\ast 3;vardaysTop=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;varinfo=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
  东莞网站建设www.zg886.cn