vue仿钉钉的考勤日历（基于vue-calendar-component组件）

直接上效果图，需要再往下看

GitHub地址：vue-calendar-component
由于需要对此组件的样式及功能的扩展，直接复制代码过来修改，开始贴代码，很长很长慢慢看

checkCalendar.vue(子组件)

<style lang="scss" rel="stylesheet/scss">@media screen and (min-width: 460px) {.wh_item_date:hover {background: #71c7a5;cursor: pointer;}}* {margin: 0;padding: 0;}.wh_container {max-width: 410px;margin: auto;}li {list-style-type: none;}.wh_top_title {display: flex;}.wh_top_title li {cursor: pointer;display: flex;color: #fff;font-size: 18px;flex: 1;justify-content: center;align-items: center;height: 47px;}.wh_top_title .wh_content_li {cursor: auto;flex: 2.5;color: black;}.wh_content_all {font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;background-color: white;width: 100%;overflow: hidden;padding-bottom: 8px;}.wh_content {display: flex;flex-wrap: wrap;padding: 0 3% 0 3%;width: 100%;}.wh_content:first-child .wh_content_item_tag,.wh_content:first-child .wh_content_item {color: #ddd;font-size: 16px;}.wh_content_item,wh_content_item_tag {font-size: 15px;width: 13.4%;text-align: center;color: #fff;position: relative;}.wh_content_item {height: 40px;}.wh_top_tag {width: 40px;height: 40px;line-height: 40px;margin: auto;display: flex;justify-content: center;align-items: center;color: black;}.wh_item_date {width: 30px;height: 30px;line-height: 30px;margin: auto;display: flex;justify-content: center;align-items: center;color: black;.smallDot {background-color: #f99341;width: 5px;height: 5px;border-radius: 50%;text-align: center;margin-left: 13px;}.smallDot1 {background-color: #1989fa;width: 5px;height: 5px;border-radius: 50%;text-align: center;margin-left: 13px;}}.wh_left {width: 12px;height: 12px;border-top: 2px solid #ffffff;border-left: 2px solid #ffffff;transform: rotate(-45deg);border-color: black;}.wh_left:active,.wh_right:active {border-color: #ddd;}.wh_right {width: 12px;height: 12px;border-top: 2px solid #ffffff;border-right: 2px solid #ffffff;transform: rotate(45deg);border-color: black;}.wh_content_item > .wh_isMark {margin: auto;border-radius: 50%;background: blue;z-index: 2;}.wh_content_item .wh_other_dayHide {color: #bfbfbf;}.wh_content_item .wh_want_dayHide {color: #bfbfbf;}.wh_content_item .wh_isToday {background: #77adfa;border-radius: 50%;}.wh_content_item .wh_chose_day {background: #1989fa;border-radius: 50%;}
</style><template><section class="wh_container"><div class="wh_content_all"><div class="wh_top_title"><li @click="PreMonth(myDate,false)"><div class="wh_left"></div></li><li class="wh_content_li">{{dateTop}}</li><li @click="NextMonth(myDate,false)"><div class="wh_right"></div></li></div><div class="wh_content"><div class="wh_content_item" v-for="tag in textTop"><div class="wh_top_tag">{{tag}}</div></div></div><div class="wh_content"><div class="wh_content_item" v-for="(item,index) in list" @click="clickDay(item,index)"><div class="wh_item_date" style="display: block"v-bind:class="[{ wh_isMark: item.isMark},{wh_other_dayHide:item.otherMonth!=='nowMonth'},{wh_want_dayHide:item.dayHide},{wh_isToday:item.isToday},{wh_chose_day:item.chooseDay},setClass(item)]">{{item.id}}<!--这里是控制异常、正常的那个小圆点--><span v-for="(date,index) in dateList" :key="index"><span v-if="date.offDutyTime&&date.onDutyTime&&formatDate(date.recordDate)==item.date&&(isLate(date.serverEndTime,date.offDutyTime)||isLate(date.onDutyTime,date.serverStartTime))"><div class="smallDot"></div></span><span v-if="date.offDutyTime&&date.onDutyTime&&formatDate(date.recordDate)==item.date&&!isLate(date.serverEndTime,date.offDutyTime)&&!isLate(date.onDutyTime,date.serverStartTime)"><div class="smallDot1"></div></span></span></div></div></div></div></section>
</template><script>import timeUtil from "./calendar";export default {data() {return {myDate: [],list: [],historyChose: [],dateTop: "",loginNannyUser: {},loginGzhUser: {},dateList: []};},props: {markDate: {type: Array,default: () => []},markDateMore: {type: Array,default: () => []},textTop: {type: Array,default: () => ["一", "二", "三", "四", "五", "六", "日"]},sundayStart: {type: Boolean,default: () => false},agoDayHide: {type: String,default: `0`},futureDayHide: {type: String,default: `2554387200`},joinWishId: {default: null}},created() {let $this = this;this.getLoginAllUser("nanny", {}, function () {//这里只是我这边的业务，删除就行});this.intStart();//初始化数据this.myDate = new Date();},methods: {isLate(str, str1) {//判断两个时分秒大小return new Date((this.formatDates(new Date()) + " " + str).replace(/-/g, '/')) > new Date((this.formatDates(new Date()) + " " + str1).replace(/-/g, '/'));},formatDate(date) {date = typeof date === 'string' ? new Date(date.replace(/\-/g, '/')) : date;return date.getFullYear() + '/' + (date.getMonth() + 1) + '/'+ date.getDate();},intStart() {timeUtil.sundayStart = this.sundayStart;},setClass(data) {let obj = {};obj[data.markClassName] = data.markClassName;return obj;},clickDay(item, index) {if (item.otherMonth === "nowMonth" && !item.dayHide) {this.getList(this.myDate, item.date);}if (item.otherMonth !== "nowMonth") {item.otherMonth === "preMonth"? this.PreMonth(item.date): this.NextMonth(item.date);}},ChoseMonth(date, isSelectedDay = true) {date = timeUtil.dateFormat(date);this.myDate = new Date(date);this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));if (isSelectedDay) {this.getList(this.myDate, date, isSelectedDay);} else {this.getList(this.myDate);}},PreMonth(date, isSelectedDay = true) {date = timeUtil.dateFormat(date);this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));this.axiosPost("/nannyCheckIn/findMonthList.n", {date: this.myDate,joinWishListId: this.joinWishId,}, function (resData) {this.dateList = resData.list;});if (isSelectedDay) {this.getList(this.myDate, date, isSelectedDay);} else {this.getList(this.myDate);}},NextMonth(date, isSelectedDay = true) {date = timeUtil.dateFormat(date);this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));this.axiosPost("/nannyCheckIn/findMonthList.n", {date: this.myDate,joinWishListId: this.joinWishId,}, function (resData) {this.dateList = resData.list;});if (isSelectedDay) {this.getList(this.myDate, date, isSelectedDay);} else {this.getList(this.myDate);}},forMatArgs() {let markDate = this.markDate;let markDateMore = this.markDateMore;markDate = markDate.map(k => {return timeUtil.dateFormat(k);});markDateMore = markDateMore.map(k => {k.date = timeUtil.dateFormat(k.date);return k;});return [markDate, markDateMore];},getList(date, chooseDay, isSelectedDay = true) {const [markDate, markDateMore] = this.forMatArgs();this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;let arr = timeUtil.getMonthList(this.myDate);for (let i = 0; i < arr.length; i++) {let markClassName = "";let k = arr[i];k.chooseDay = false;const nowTime = k.date;const t = new Date(nowTime).getTime() / 1000;//看每一天的classfor (const c of markDateMore) {if (c.date === nowTime) {markClassName = c.className || "";}}//标记选中某些天 设置classk.markClassName = markClassName;k.isMark = markDate.indexOf(nowTime) > -1;//无法选中某天k.dayHide = t < this.agoDayHide || t > this.futureDayHide;if (k.isToday) {this.$emit("isToday", nowTime);}let flag = !k.dayHide && k.otherMonth === "nowMonth";if (chooseDay && chooseDay === nowTime && flag) {this.$emit("choseDay", nowTime);this.historyChose.push(nowTime);k.chooseDay = true;} else if (this.historyChose[this.historyChose.length - 1] === nowTime &&!chooseDay &&flag) {k.chooseDay = true;}}this.list = arr;}},mounted() {this.getList(this.myDate);this.axiosPost("/nannyCheckIn/findMonthList.n", {//业务，根据自己需要修改joinWishListId: this.joinWishId,}, function (resData) {this.dateList = resData.list;});},watch: {markDate: {handler(val, oldVal) {this.getList(this.myDate);},deep: true},markDateMore: {handler(val, oldVal) {this.getList(this.myDate);},deep: true},agoDayHide: {handler(val, oldVal) {this.getList(this.myDate);},deep: true},futureDayHide: {handler(val, oldVal) {this.getList(this.myDate);},deep: true},sundayStart: {handler(val, oldVal) {this.intStart();this.getList(this.myDate);},deep: true},joinWishId: {//监听这个是因为要切换工单，换数据handler(val, oldVal) {this.axiosPost("/nannyCheckIn/findMonthList.n", {joinWishListId: val,}, function (resData) {this.dateList = resData.list;});},deep: true}}};
</script>

calendar.js(日期工具类)

export default {// 当某月的天数getDaysInOneMonth(date) {const year = date.getFullYear();const month = date.getMonth() + 1;const d = new Date(year, month, 0);return d.getDate();},// 向前空几个getMonthweek(date) {const year = date.getFullYear();const month = date.getMonth() + 1;const dateFirstOne = new Date(year + '/' + month + '/1');return this.sundayStart ?dateFirstOne.getDay() == 0 ? 7 : dateFirstOne.getDay() :dateFirstOne.getDay() == 0 ? 6 : dateFirstOne.getDay() - 1;},/*** 获取当前日期上个月或者下个月*/getOtherMonth(date, str = 'nextMonth') {const timeArray = this.dateFormat(date).split('/');const year = timeArray[0];const month = timeArray[1];const day = timeArray[2];let year2 = year;let month2;if (str === 'nextMonth') {month2 = parseInt(month) + 1;if (month2 == 13) {year2 = parseInt(year2) + 1;month2 = 1;}} else {month2 = parseInt(month) - 1;if (month2 == 0) {year2 = parseInt(year2) - 1;month2 = 12;}}let day2 = day;const days2 = new Date(year2, month2, 0).getDate();if (day2 > days2) {day2 = days2;}if (month2 < 10) {month2 = '0' + month2;}if (day2 < 10) {day2 = '0' + day2;}const t2 = year2 + '/' + month2 + '/' + day2;return new Date(t2);},// 上个月末尾的一些日期getLeftArr(date) {const arr = [];const leftNum = this.getMonthweek(date);const num = this.getDaysInOneMonth(this.getOtherMonth(date, 'preMonth')) - leftNum + 1;const preDate = this.getOtherMonth(date, 'preMonth');// 上个月多少开始for (let i = 0; i < leftNum; i++) {const nowTime = preDate.getFullYear() + '/' + (preDate.getMonth() + 1) + '/' + (num + i);arr.push({id: num + i,date: nowTime,isToday: false,otherMonth: 'preMonth',});}return arr;},// 下个月末尾的一些日期getRightArr(date) {const arr = [];const nextDate = this.getOtherMonth(date, 'nextMonth');const leftLength = this.getDaysInOneMonth(date) + this.getMonthweek(date);const _length = 7 - leftLength % 7;for (let i = 0; i < _length; i++) {const nowTime = nextDate.getFullYear() + '/' + (nextDate.getMonth() + 1) + '/' + (i + 1);arr.push({id: i + 1,date: nowTime,isToday: false,otherMonth: 'nextMonth',});}return arr;},// format日期dateFormat(date) {date = typeof date === 'string' ? new Date(date.replace(/\-/g, '/')) : date;return date.getFullYear() + '/' + (date.getMonth() + 1) + '/'+ date.getDate();},// 获取某月的列表不包括上月和下月getMonthListNoOther(date) {const arr = [];const num = this.getDaysInOneMonth(date);const year = date.getFullYear();const month = date.getMonth() + 1;const toDay = this.dateFormat(new Date());for (let i = 0; i < num; i++) {const nowTime = year + '/' + month + '/' + (i + 1);arr.push({id: i + 1,date: nowTime,isToday: toDay === nowTime,otherMonth: 'nowMonth',});}return arr;},// 获取某月的列表 用于渲染getMonthList(date) {return [ ...this.getLeftArr(date), ...this.getMonthListNoOther(date), ...this.getRightArr(date) ];},// 默认是周一开始sundayStart: false,
};

然后引入到组件中

import nCalendar from './checkCalendar'export default (Vue) => {Vue.component("nCalendar", nCalendar);
}

然后应用在页面中

<style lang="scss" rel="stylesheet/scss">.nCalender {.detailDiv {margin: 20px 0;.imgDiv {img {width: 60px;height: 60px;}}.hourDiv {background-color: white;padding-top: 10px;.clockStyle {font-size: 16px;color: #4b90ed;}.hourText {font-size: 14px;margin-left: 5px;}}.stepDiv {.tagDiv {margin-top: 10px;}}}}
</style>
<template><div class="nCalender"><navBar:showLeft="true":borderLine=truebackground="#f2f2f2"title="考勤日历"><div @click="$router.push('/h5nAddCard')" slot="right">补卡</div></navBar><van-field label="选择工单" v-if="list.length>1":value="obj1!=null&&obj1.joinWishId!=null?obj1.joinWishId:null"><selectJoinTemp slot="input" name="joinWishId" name1="auditUserId"v-model="obj1" :isDefault="true"/></van-field><!--日历--><div class="CalendarDiv" v-if="obj1&&obj1.joinWishId&&obj1.joinWishId>0"><nCalendar:joinWishId="obj1.joinWishId"v-on:choseDay="clickDay"v-on:changeMonth="changeDate"/></div><div v-if="list.length==0" class="detailDiv" style="text-align: center;color: #bfbfbf"><div class="imgDiv"><img src="../img/rest.png"/></div><div style="margin-top: 2%">无合同</div></div><!--当日详情--><span></span><div class="detailDiv"v-if="obj!=null&&obj.id>0&&obj.recordDate&&new Date(obj.recordDate.replace(/-/g,'/'))<new Date()"><div class="hourDiv"><van-row><van-col offset="1"><van-icon name="clock" class="clockStyle"/></van-col><van-col class="hourText">工时共计:<span v-if="obj.totalHour!=null">{{obj.totalHour}}小时</span><span v-else>暂无</span></van-col></van-row></div><div class="stepDiv"><van-steps direction="vertical" :active="-1"><van-step><div>签到时间&nbsp;<span v-if="obj.onDutyTime">{{formatMinutes(obj.onDutyTime)}}</span><span v-else>暂无</span>（上班时间：{{formatMinutes(obj.serverStartTime)}}）</div><div class="tagDiv"><van-tag v-if="obj.onDutyTime&&!isLate(obj.onDutyTime,obj.serverStartTime)" roundtype="primary">正常</van-tag><van-tag v-else roundtype="warning">迟到</van-tag></div></van-step><van-step><div>签退时间&nbsp;<span v-if="obj.offDutyTime">{{formatMinutes(obj.offDutyTime)}}</span><span v-else>暂无</span>（下班时间：{{formatMinutes(obj.serverEndTime)}}）</div><div class="tagDiv"><van-tag v-if="obj.offDutyTime&&isLate(obj.serverEndTime,obj.offDutyTime)" roundtype="warning">早退</van-tag><van-tag v-if="obj.offDutyTime&&!isLate(obj.serverEndTime,obj.offDutyTime)" roundtype="primary">正常</van-tag></div></van-step></van-steps></div></div><div v-if="obj!=null&&obj.id>0&&!obj.offDutyTime&&!obj.onDutyTime" class="detailDiv"style="text-align: center;color: #bfbfbf"><div class="imgDiv"><img src="../img/rest.png"/></div><div style="margin-top: 2%">当天无打卡记录</div></div></div>
</template><script>export default {name: "nCalender",data() {return {loginNannyUser: {},loginGzhUser: {},obj: {},obj1: {},list: [],dateTemp: null}},methods: {isLate(str, str1) {//判断两个时分秒大小return new Date((this.formatDates(new Date()) + " " + str).replace(/-/g, '/')) > new Date((this.formatDates(new Date()) + " " + str1).replace(/-/g, '/'));},clickDay(data) {//选中某天this.dateTemp = datathis.axiosPost("/nannyCheckIn/findNowRecord.n", {queryDate: data,id: this.obj1.joinWishId}, function (resData) {this.obj = resData.obj;});},changeDate(data) {//左右点击切换月份console.log(data);},},mounted() {},created() {let $this = this;this.getLoginAllUser("nanny", {}, function () {$this.axiosPost("/joinWishList/findNannyCon.n", {}, function (resData) {$this.list = resData.list;if (resData.list != null && resData.list.length != 0) {$this.$set($this.obj1, "joinWishId", resData.list[0].id);}$this.axiosPost("/nannyCheckIn/findNowRecord.n", {id: $this.obj1.joinWishId}, function (resData) {$this.obj = resData.obj;});});});},watch: {"obj1.joinWishId": {handler(newObj, oldObj) {if (newObj != oldObj && newObj && newObj != null) {this.axiosPost("/nannyCheckIn/findNowRecord.n", {queryDate: this.dateTemp,id: newObj}, function (resData) {this.obj = resData.obj;});}},deep: true},}}
</script>

差不多就是以上代码，直接复制了用，改一下ajax请求就行，需要扩展的就自己修改了[抱拳]

vue仿钉钉的考勤日历（基于vue-calendar-component组件）相关推荐

考勤日历 ajax,vue实现钉钉的考勤日历
本文实例为大家分享了vue实现钉钉的考勤日历的具体代码,供大家参考,具体内容如下直接上效果图,需要再往下看 GitHub地址:vue-calendar-component 由于需要对此组件的样式及功 ...
vue实现卡片式上下滑动_基于Vue.js仿制探探卡片左右滑动特效
说明 > 最近一直在捣鼓Nuxt.js项目,项目中有个需求是实现类似探探左右滑动切换功能.要求能实现手指拖拽切换.点击按钮进行切换.拖拽回弹等功能. 如上图:最终展示效果 emmm~~ 是不是感 ...
vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取本地图片 url */ fun ...
vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
vue和Java做数据交互_基于vue和springmvc前后端分离，json类接口调用介绍
基于vue和springmvc前后端分离,json类接口调用介绍版本要求:spring-3.2.9.RELEASE.vue-2.9.2.axios-0.17.1,其中axios作为http clie ...
vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点轻 ...
基于vue的响应式ui框架_基于Vue.js的响应式和可配置UI框架
基于vue的响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and C ...
vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...

vue仿钉钉的考勤日历（基于vue-calendar-component组件）

vue仿钉钉的考勤日历（基于vue-calendar-component组件）相关推荐

最新文章

热门文章