首页
所有分类
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 相关文章推荐
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
深入理解JavaScript系列（19）：求值策略(Evaluation strategy)详解
Mar 05 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
JS实现的进制转换，浮点数相加，数字判断操作示例
Nov 09 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 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
URL重定向(3) 443(1) lamp(1) SSL(3) 跨域(4) Rewrite(4) 伪静态(1) lnmp(1) 压力测试(1) Centos(8)
You might like
php的access操作类
2008/04/09 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
javascript标签在页面中的位置探讨
2013/04/11 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）
2017/07/11 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
浅析python参数的知识点
2018/12/10 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python实现程序重启和系统重启方式
2020/04/16 Python
python如何绘制疫情图
2020/09/16 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
Wiggle新西兰：自行车、跑步、游泳
2020/05/06 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ？
2015/09/07 面试题
在校大学生个人的自我评价
2014/02/13 职场文书
求职意向书
2014/04/01 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
工作证明英文模板
2014/10/21 职场文书
明确岗位职责
2015/02/14 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
Django rest framework如何自定义用户表
2021/06/09 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js
mysql 排序失效
2022/05/20 MySQL
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS