这篇文章主要为大家详细介绍了vue实现钉钉的考勤日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现钉钉的考勤日历的具体代码，供大家参考，具体内容如下
直接上效果图，需要再往下看
GitHub地址：vue-calendar-component
由于需要对此组件的样式及功能的扩展，直接复制代码过来修改，开始贴代码，很长很长 慢慢看
checkCalendar.vue(子组件)
{{dateTop}}
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 然后引入到组件中
import nCalendar from './checkCalendar' export default (Vue) => { Vue.component("nCalendar", nCalendar); }然后应用在页面中
工时共计:{{obj.totalHour}}小时暂无 正常 迟到 早退 正常 当天无打卡记录
差不多就是以上代码，直接复制了用，改一下ajax请求就行，需要扩展的就自己修改了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
以上就是vue实现钉钉的考勤日历的详细内容，更多请关注0133技术站其它相关文章！
