首页
所有分类
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 相关文章推荐
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
Vue自定义属性实例分析
Feb 23 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 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
.NET面试题(131) LINUX面试题(83) 软件工程师面试题(40) 网络工程师面试题(96) Oracle面试题(81) EJB面试题(46) Javascript面试题(44) PYTHON面试题(27) C#面试题(90) 软件测试工程师面试题(53)
You might like
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
Js组件的一些写法
2010/09/10 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
浅谈AngularJS中使用$resource（已更新）
2017/09/14 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
实例详解vue中的$root和$parent
2019/04/29 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Windows下python3.7安装教程
2018/07/31 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python图片处理模块PIL操作方法（pillow）
2020/04/07 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
CAT鞋英国官网：坚固耐用的靴子和鞋
2016/10/21 全球购物
英国复古服装购物网站：Collectif
2019/10/30 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
活动总结报告格式
2014/05/09 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
美术教师求职信范文
2015/03/20 职场文书
竞聘开场白方式有哪些？
2019/08/28 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
Java数据结构之堆(优先队列)
2022/05/20 Java/Android