首页
所有分类
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 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
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) Vue3(1) pycryto(1) 连接器(1) HDR(1) 数据加密(1) key(1) kafka(2) shell脚本(1)
You might like
PHP+ajax 无刷新删除数据
2010/02/20 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python网络编程之读取网站根目录实例
2014/09/30 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python 用下标截取字符串的实例
2018/12/25 Python
详解python：time模块用法
2019/03/25 Python
简单了解python协程的相关知识
2019/08/31 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
全面解析CSS Media媒体查询使用操作（推荐）
2017/08/15 HTML / CSS
服装设计专业自荐书范文
2013/12/30 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
雷锋之歌观后感
2015/06/10 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
开学随笔
2015/08/15 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL