首页
所有分类
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 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
Bootstrap源码解读导航（6）
Dec 23 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 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
SWL(1) GWEN(1) 发报机(1) LW(1) 调频(4) 电磁辐射(1) ad hoc(1) FM(4) SW(1) 调幅(1)
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php实现的SESSION类
2014/12/02 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
用jscript实现新建word文档
2007/06/15 Javascript
JavaScript中的对象化编程
2008/01/16 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
你可能不知道的前端算法之文字避让（inMap）
2018/01/12 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python实现扫描局域网活动ip（扫描在线电脑）
2015/04/28 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
美国百货齐全的精品网站，提供美式风格的产品：Overstock.com
2016/07/22 全球购物
惠而浦美国官网：Whirlpool.com
2021/01/19 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
爸爸的花儿落了教学反思
2014/02/20 职场文书
超越自我演讲稿
2014/05/21 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
领导班子对照检查材料
2014/09/22 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
运动会宣传稿50字
2015/07/23 职场文书
DSP接收机前端设想
2022/04/05 无线电