移动端日历---纯**自己写的

有什么需求怎么办？插件！
自己不想写咋办？插件！
……
欠的总要还的~终于还是要自己写，因为没有满足需求的插件，移动端的更少。但实际上我写的并不是插件，而是功能。嘻嘻。另外这个功能不像插件的，因为是查看个人值班的，所以需要显示整月的日期，所以并非像插件日历日期闭合的很好。但是原理都是一样的。

先上图：

开始……

1、布局：

<h1><span class="left" @click="left"><span></span></span>{{defaultMonth}}月值班表 {{defaultYear}}<span class="right" @click="right"><span></span></span>
</h1><div class="zhiban-box"><ol class="week"><li v-for="week in weekday" :class="week.class">{{week.week}}</li></ol><div class="day-box"><ul class="day"><li v-for="item in dayArry" :class="item.class">    <span :class="item.ban">{{item.item}}<span>{{item.txt}}</span></span></li></ul></div></div>

2、数据(以下数据初始化需要使用，所以声明时就初始化赋值了)

data(){return {defaultMonth:new Date().getMonth()+1,defaultYear:new Date().getFullYear(),}
}

3、逻辑代码
大概逻辑写一下：

渲染日历表。初始化需要渲染一次，每次点击按钮切换时，重新加载一次当前选中月份的日历表。
周六日变色。根据一般的日历习惯，需要对周六周日变色显示。
填充补位。举例：假如本月的第一天是周三，那么就说明日历表中”周日“、”周一“、”周二“应该是空出来的，不应该排列日期。

以下代码中可以看出push了新的字段，请忽略，因为本人项目中需要用。
重新渲染日历表（包括初始化日历表的函数）

//重新渲染日历表
createDay(currentYear, currentMonth){var curDate = new Date(currentYear, currentMonth, 0);for (var k = 1; k <= curDate.getDate(); k++) {this.dayArry.push({"item":k,"class":"","ban":"","txt":""});}
}

重新给周六日染色，并且补位

//重新给周六周日染色
changeColorWeek(currentYear, currentMonth){var date = new Date(currentYear, currentMonth, 0);date.setDate(1);//补充月份前面的空位if(this.weekday[date.getDay()].id == "7"){return false;}else{for(let i = 0; i<this.weekday[date.getDay()].id; i++){this.dayArry.unshift({"item":"","class":"","ban":"","txt":""});}}//改变周六日颜色for(var i=0;i<this.dayArry.length;i++){if(i%7 == 0 && i/7 !=0 ){this.dayArry[i].class = "defaultWeek";this.dayArry[i-1].class = "defaultWeek";}}
}

左右按钮点击的过程：

left(){if(this.defaultMonth == 1){this.defaultMonth = 12;this.defaultYear -- ;this.dayArry = [];this.createDay(this.defaultYear, this.defaultMonth);this.changeColorWeek(this.defaultYear, this.defaultMonth);}else{this.defaultMonth -- ;this.dayArry = [];//需要在每次加载新月份的日历时，清空原来的日历列表this.createDay(this.defaultYear, this.defaultMonth);this.changeColorWeek(this.defaultYear, this.defaultMonth);//改变按钮颜色document.querySelector(".right > span").style.borderLeft = '6px solid #5a5a5a';}}

right(){if(this.defaultMonth == new Date().getMonth()+1 && this.defaultYear == new Date().getFullYear()){return false;}else{if(this.defaultMonth == 12){this.defaultMonth = 1;this.defaultYear ++ ;this.dayArry = [];this.createDay(this.defaultYear, this.defaultMonth);}else{this.defaultMonth ++ ;this.dayArry = [];this.createDay(this.defaultYear, this.defaultMonth);this.changeColorWeek(this.defaultYear, this.defaultMonth);if(this.defaultMonth == new Date().getMonth()+1){document.querySelector(".right > span").style.borderLeft = '6px solid #b5b5b5';}}}
}

好了，大概就是这个样子。如果有什么问题，还需要大神们指出。谢谢各位。

如果对您有帮助，给点个赞。谢谢，嘻嘻。

最近在感冒，蓝瘦……

移动端日历---纯**自己写的相关推荐

vue+js纯手写日历（包含农历，节假日）
vue+js纯手写日历(包含农历,节假日) 使用的js 地址 dataChange.js 插件使用了elementui //完整代码 <template><div><di ...
记录一下曾经写过的P2P金融项目-理财端（PC端）纯代码(续-服务消费者工程)
pom文件: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3 ...
纯手写原生PHP网站管理后台系统网站管理系统
一.源码简介一套纯手写原生的PHP网站管理后台,前端利用LayUI实现,实现PHP初学者专研学习使用,对于PHP学习的人,只有熟悉了原生的PHP开发,才适合利用其它框架搭建自己的网站平台.封城期间, ...
阿里P8架构大神分享纯手写“kafka文档”看完直呼太牛！
什么是 Kafka Kafka 是由 Linkedin 公司开发的,它是一个分布式的,支持多分区.多副本,基于 Zookeeper 的分布式消息流平台,它同时也是一款开源的基于发布订阅模式的消息引擎系 ...
IOS纯手写代码支持旋屏
2019独角兽企业重金招聘Python工程师标准>>> 不用ib纯手写代码实现旋屏效果,xcode4.6.3,今天试了一下,可以做到,但是代码量会增加,基本思路是:在 - (void ...
纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
20个纯css3写的logo
2019独角兽企业重金招聘Python工程师标准>>> 随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些 ...
推荐一款移动端日历App吉日历
推荐一款移动端日历App吉日历一应用描述万年历.日历.农历.黄历.假期安排.天气预报.记事提醒便捷查看,一目了然! 二功能介绍: 1.万年历:精美的日期展示,完整的节日日历随意查看,节假日.休 ...
【手写系列】纯手写实现一个高可用的RPC
前言在实际后台服务开发中,比如订单服务(开发者A负责)需要调用商品服务(开发者B负责),那么开发者B会和A约定调用API,以接口的形式提供给A.通常都是B把API上传到Maven私服,然后B开始写A ...
【手写系列】纯手写实现JDK动态代理
前言在Java领域,动态代理应用非常广泛,特别是流行的Spring/MyBatis等框架.JDK本身是有实现动态代理技术的,不过要求被代理的类必须实现接口,不过cglib对这一不足进行了有效补充.本 ...

移动端日历---纯**自己写的

移动端日历---纯**自己写的相关推荐

最新文章

热门文章