首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现日历备忘录功能

Posted in Javascript onSeptember 24, 2020

用vue写了个日历备忘录的功能，省略了备忘录的增删改查功能。

vue实现日历备忘录功能

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>备忘录</title>
 <style type="text/css">
 #box{
  width: 469px;
 }
 /*日历*/
  *{
  padding: 0;
  margin: 0;
  }
  li{
  list-style: none;
  }
  #calendar{
  width:380px;
  margin: 40px auto 0;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
  }
  .pickDay{
  margin: 0 auto;
  width: 100px;
  height: 65px;
  text-align: center;
  }
  .pickDay span{
  font-size: 12px;
  color: #989898;
  }
  .pickDay span:first-of-type{
  font-size: 72px;
  color: #789AF7;
  }
  .month {
  width: 100%;
  } 
  .month ul {
  margin: 29px 0 25px;
  display: flex;
  justify-content: center;
  } 
  .year-month {
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .choose-year {
  font-size: 14px;
  color: #989898;
  }
  .choose-month {
  text-align: center;
  color: #989898;
  font-size: 14px;
  }
  .arrow {
  width: 28px;
  height: 28px;
  text-align: center;
  }

  .arrow:hover {
  background: rgba(100, 2, 12, 0.1);
  cursor: pointer;
  }

  .month ul li {
  color: #789AF7;
  font-size: 20px;
  }

  .weekdays {
  width: 270px;
  margin: 0 auto 7.5px;
  display: flex;
  flex-wrap: wrap;
  color: #808080;
  justify-content: space-around;
  }

  .weekdays li {
  display: inline-block;
  font-size: 16px;
  color: #808080; 
  width: 26px;
  text-align: center;
  }

  .days {
  width: 270px; 
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: #FFFFFF;
  }

  .days li {
  position: relative;
  display: inline-block;
  width: 14.2%;
  text-align: center;
  padding-bottom: 7.5px;
  padding-top: 7.5px; 
  color: #999;
  cursor: pointer;
  }
  .days .momo_mark{
  position: absolute;
  right: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7699F8;
  }
  .days li span{
  font-size: 16px;
  }
  .days li .active {
  color: #789AF7;
  } 
  .days li .other-month {
  padding: 5px;
  color: #E6E6E6;
  }
  .days li:hover{
  color: #789AF7;
  } 
  .days li:hover .other-month{
  color: #789AF7;
  }

 /*备忘录*/
  #memo{
  width: 400px;
  margin: 30px 0 0 20px;
  }
  #memo h4{
  text-indent: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #7699F8;
  }
  .memo_list li{
  margin-top: 12px;
  }
  .memo_list .memo_list_s{
  width: 399px; 

  }
  .memo_list .memo_list_s:hover{
  background: #EEE;
  }
  .memo_list .memo_list_s:hover .circle{
  background: #F84848;
  }

  .memo_list .memo_list_s:hover #edit_memo{
  background: url(../assets/edit_active.png) no-repeat;
  }
  .memo_list .memo_list_s:hover #del_memo{
  background: url(../assets/del_active.png) no-repeat;
  }
  .circle{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7699F8;
  vertical-align: top;
  margin: 12px 5px 0px 9px;
  }
  .memo_list_mont{
  display: inline-block;
  width: 323px;
  min-height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #666666;
  }
  .memo_operate{
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  padding-top: 9px;
  }
  .memo_operate button{
  width: 12px;
  height: 12px;
  margin-right: 10px;
  background: #fff;
  border: none;
  }
  #addMemo{
  width: 96px;
  height: 28px;
  line-height: 28px;
  color: #789BF8;
  background: #fff;
  border: 1px solid #789BF8;
  border-radius: 2px;
  margin: 25px 0 0 20px;
  }
  .memo_cont{
  width: 310px;
  background: #7699F8;
  border-radius: 2px;
  margin-left: 20px;
  margin-top: 15px;
  padding: 37px 30px 24px 30px;
  }
  .memo_edit{
  width: 100%;
  min-height: 140px;
  line-height: 28px;
  color: #fff;
  font-size: 14px;
  background: url(../assets/bgborder.png) repeat-y;
  outline: none;
  border: none;
  resize:none;
  }
  .edit_operate{
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  }
  .edit_operate button{
  width: 20px;
  height: 20px;
  margin-left: 16px;

  }
  #cancel_edit{
  background: url(../assets/error.png) center center no-repeat;
  }
  #save_edit{
  background: url(../assets/right.png) center center no-repeat;
  }

 /*动画*/
  .fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease-in;
  }
  .fade-enter, .fade-leave-to{
  opacity: 0;
  }
 </style>
</head>
<body>
 <div id="box">
 <div id="calendar" v-if="pickDay != null">
  <div class="pickDay">
  <span>{{pickDay}}</span><span>日</span>
  </div>
  <!-- 年份 月份 -->
  <div class="month">
  <ul>
   <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
   <li class="year-month" @click="pickYear(currentYear,currentMonth)">
   <span class="choose-year">{{ currentYear }}</span>
   <span class="choose-month"> - {{ currentMonth }}</span>
   </li>
   <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
  </ul>
  </div>
  <!-- 星期 -->
  <ul class="weekdays">
  <li>MO</li>
  <li>TU</li>
  <li>WE</li>
  <li>TH</li>
  <li>FR</li>
  <li style="color:red">SA</li>
  <li style="color:red">SU</li>
  </ul>
  <!-- 日期 -->
  <ul class="days">
  <li @click="pick(day.day)" v-for="day in days">
   <!--本月-->
   <span class="momo_mark" v-if="day.memo_type"></span>
   <span v-if="day.day.getMonth()+1 != currentMonth" class="other-month">{{ day.day.getDate() }}</span>
   <span v-else>
   <!--今天-->
   <span v-if="day.day.getFullYear() == new Date().getFullYear() && day.day.getMonth() == new Date().getMonth() && day.day.getDate() == new Date().getDate()" class="active">{{ day.day.getDate() }}</span>
   <span v-else>{{ day.day.getDate() }}</span>
   </span>
  </li>
  </ul>
 </div>
 <div id="memo">
  <h4>备忘录</h4>
  <ul class="memo_list" v-if="currentMemo">
  <li v-for="(memo,index) in currentMemo" :key="index">
   <div class="memo_list_s">
   <span class="circle"></span>
   <div class="memo_list_mont">{{memo.cont}}</div>
   </div>
  </li>
  </ul>
 </div>
 </div>
</body>
 <script src="https://cdn.bootcss.com/vue/2.5.11/vue.js"></script>
 <script type="text/javascript">
 var vm = new Vue({
  el : "#box",
  data : {
  currentDay: 1,
  currentMonth: 1,
  currentYear: 1970,
  currentWeek: 1,
  days: [],
  pickDay : null,
  currentMemo : null,
  memo_list :["2018-05-11","2018-05-31"]//时间格式必须为xxxx-xx-xx;
  },
  created: function() {
  this.initCalendar(null);
  },
  methods:{
  initCalendar: function(cur){
   if (cur) {
   var date = new Date(cur);
   } else {
   var date = new Date();
   this.pickDay = date.getDate();
   }
   this.currentYear = date.getFullYear();
   this.currentMonth = date.getMonth() + 1;   
   var str = this.formatDate(this.currentYear , this.currentMonth, 1);
   this.currentWeek = new Date(str).getDay() == 0 ? 7 : new Date(str).getDay();

   this.days.length = 0;//初始化数组
   for (var i = this.currentWeek - 1; i >= 0; i--) { 
   var d = new Date(str);
   var memo_type = false;
   d.setDate(d.getDate() - i);   
   for (var j = 0; j < this.memo_list.length; j++) {
    var memoTime = new Date(this.memo_list[j]).getTime();
    if( d.getTime() == memoTime){
    memo_type = true;
    }   
   }
   this.days.push({day:d,memo_type:memo_type});
   }
   for (var i = 1; i <= 35 - this.currentWeek; i++){
   var d = new Date(str);
   d.setDate(d.getDate() + i);
   var memo_type = false;
   for (var j = 0; j < this.memo_list.length; j++) {
    var memoTime = new Date(this.memo_list[j]).getTime()
    if( d.getTime() == memoTime){
    memo_type = true;
    }   
   }
   this.days.push({day:d,memo_type:memo_type});
   }
  },
  pick: function(date){
   this.pickDay = date.getDate();
   this.initCalendar(this.formatDate(date.getFullYear() , date.getMonth() + 1, 1));
   var curPickDay = this.formatDate(date.getFullYear() , date.getMonth() + 1, date.getDate())
   // 数据发送请求拿回即可，这里我就写死了,随便写两个样例
   if(curPickDay == "2018-05-11"){   
   this.currentMemo = [{
    cont :"setDate() 方法用于设置一个月的某一天。该方法什么都不返回"
   },{
    cont :"getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。"
   }]
   }else if(curPickDay == "2018-05-31"){
   this.currentMemo = [{
    cont :"getDay() 方法可返回表示星期的某一天的数字。返回值是 0（周日） 到 6（周六） 之间的一个整数"
   },{
    cont :"setDate(0); 上月最后一天；setDate(-1); 上月倒数第二天；setDate(dx) 参数dx为 上月最后一天的前后dx天"
   }]
   }else{
   this.currentMemo= null;
   }
  },
  pickPre: function(year, month){
   // setDate(0); 上月最后一天
   // setDate(-1); 上月倒数第二天
   // setDate(dx) 参数dx为 上月最后一天的前后dx天
   var d = new Date(this.formatDate(year , month , 1));
   d.setDate(0);
   this.initCalendar(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
  },
  pickNext: function(year, month){
   var d = new Date(this.formatDate(year , month , 1));
   d.setDate(35);
   this.initCalendar(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
  },
  // 返回 类似 2016-01-02 格式的字符串
  formatDate: function(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
  }
  }
 })
 </script>
</html>

欢迎大家提意见，提BUG

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue实现日历备忘录功能

- Author -

TCorners

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
js获取form的方法
May 06 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
小程序实现分类页
Jul 12 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
Apr 03 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 #Javascript
Vue.js实现备忘录功能
Jun 26 #Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 #Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 #Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 #Javascript
js+html实现周岁年龄计算器
Jun 25 #Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 #Javascript
缅甸购物网站(1) 摩纳哥购物网站(1) 越南购物网站(9) 秘鲁购物网站(1) 亚洲购物网站(6) 乌克兰购物网站(27) 巴基斯坦购物网站(2) 匈牙利购物网站(11) 北美洲购物网站(1) 菲律宾购物网站(13)
You might like
php类常量的使用详解
2013/06/08 PHP
php文件上传简单实现方法
2015/01/24 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
功能强大的php分页函数
2016/07/20 PHP
JS实现时间格式化的方式汇总
2013/10/16 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
教你学会使用Python正则表达式
2017/09/07 Python
python读取中文txt文本的方法
2018/04/12 Python
详解flask入门模板引擎
2018/07/18 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
Marriott国际：万豪国际酒店查询预订
2017/09/25 全球购物
毕业证丢失证明
2014/01/15 职场文书
体操比赛口号
2014/06/10 职场文书
法定代表人资格证明书
2014/09/11 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
项目建议书
2015/02/04 职场文书
自荐信怎么写
2015/03/04 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
python如何查找列表中元素的位置
2022/05/30 Python