vue 带节假日考勤状态的日历

开发日历开始首先要确定当前月份在日历中需要几行显示（一般5行，少数月份需要六行）：
获取当前月份的第一天是周几，用本周剩余天数 + 4 * 7 得到5行显示天数，和本月天数对比，是否可以完整显示。
然后空余地方用下个月和上个月补

// 传入年月日， type：当前日历以周一开头还是周日开头
getMonthDaysArray(year, month, day, type)

依次得到如下数据：

   // 当前月天数this.days = this.getMonthDays(year, month);// 获取每一天的展示状态this.getMonthsStatus();// 上月天数this.preDays = this.getMonthDays(year, month - 1);// 下月天数this.nextDays = this.getMonthDays(year, month + 1);// 当前月第一天周几this.MonthFirstDayInWeek = this.getWeekday(year, month, 1);// 初始化当前日历的行数 可能是六行也可能是五行this.resetMonthDays();// 下个月第一天周几this.MonthNextDayInWeek = this.getWeekday(year, month + 1, 1);

上月在当月日历面板中的排列

 if (this.MonthFirstDayInWeek != 7) {for (let i = 0; i < this.MonthFirstDayInWeek; i++) {dayArrays.push({dayNum: this.preDays - this.MonthFirstDayInWeek + i + 1,weekDay: this.WEEKTABLE[type].cn[i],isThisMonth: false});}}

//当月日历面板中的排列

 for (let i = 1; i <= this.days; i++) {let weekDayFlag = (this.MonthFirstDayInWeek + i - 1) % 7;dayArrays.push({dayNum: i,weekDay: this.WEEKTABLE[type].cn[weekDayFlag],curDay: i === +day,type: this.monthSatus[i],isThisMonth: true});}

下月在当月日历面板中的排列

 for (let i = 1; i <= 7 - this.MonthNextDayInWeek; i++) {let weekDayFlag = (this.MonthFirstDayInWeek + this.days + i - 1) % 7;dayArrays.push({dayNum: i,weekDay: this.WEEKTABLE[type].cn[weekDayFlag],isThisMonth: false});}

基础方法

getMonthDays(year, month) {return new Date(year, month, 0).getDate();},getWeekday(year, month, day) {let str = year + "-" + month + "-" + day;let dd = new Date(str);let sd = dd.getDay() == 0 ? 7 : dd.getDay();return sd;},getweeksInMonth(year, month) {var days = this.getMonthDays(year, month);var FirstDayWeekday = this.getWeekday(year, month, 1);return Math.ceil(days + FirstDayWeekday);}

样式如下

源码，有改动：

<template><div class="card-calendar"><div class="calendar-title"><!-- {{ curDate.y }}年{{ curDate.m }}月 --><p class="opperate-pre opperate-icon" @click="preMonth"><a-icon type="left" /></p><eg-date-picker v-model="selectMonth" :attrObject="attrbutePicker" @onChange="formChange" /><p class="opperate-next opperate-icon" @click="nextMonth"><a-icon type="right" /></p><!-- <div v-if="calendarH">应出勤 {{ ycqts }}天</div> --></div><!-- <div class="calendar-opperate"><span class="opperate-pre" @click="preMonth"><i class="el-icon-d-arrow-left"></i></span><span class="opperate-next" @click="nextMonth"><i class="el-icon-d-arrow-right"></i></span></div> --><div class="calendar-head__he" v-if="calendarH"><div class="calendar-head-c"><ul class="head-c-lists"><li class="head-c-list" v-for="(item, index) in calendarH" :key="item.name"><p class="list-t"><span :style="{ color: colorsH[index] }">● </span>{{ item.name }}</p><!-- v-if="item.val > 0" --><p class="list-b-1"><span class="list-b-text">&nbsp;&nbsp;{{ item.val }}</span><span v-if="item.name == '迟到' || item.name == '早退'"> 次</span><span v-else> 天</span></p><!-- <p class="list-b-2" v-else><span class="list-b-text">&nbsp;&nbsp;{{ item.val }}</span><span v-if="item.name == '迟到' || item.name == '早退'"> 次</span><span v-else> 天</span></p> --></li></ul></div></div><div v-else><p class="empty-status">本单位暂时没有开启考勤</p></div><div class="calendar-c__he"><ul class="week-lists"><li class="week-list" v-for="(week, index) in WEEKTABLE[calendarType].cns" :key="index">{{ week }}</li></ul><ul class="day-lists" v-if="calendarD" :class="{ isSixRow: calendRows == 6 }"><li class="day-list" v-for="(day, index) in calendarD" :key="index"><p class="list-day" :class="{ curday: day.curDay }" :style="{ color: getDataStyle(day) }">{{ day.dayNum }}</p><p class="list-day-status"><eg-tool-tipplacement="top"trigger="hover"v-if="day.type && day.type.fore && day.type.fore === day.type.after"><span slot="tipMain">{{ calendarCode[day.type.fore - 1].name + "1天" }}</span><div slot="main"><spanclass="day-kq":style="{ backgroundColor: calendarCode[day.type.fore - 1].color, marginRight: '2px' }"></span></div></eg-tool-tip><eg-tool-tipplacement="top"trigger="hover"v-if="day.type && day.type.fore && day.type.fore !== day.type.after"><span slot="tipMain">{{ "上午" + calendarCode[day.type.fore - 1].name }}</span><div slot="main"><spanclass="day-kq day-kq-fore":style="{ backgroundColor: calendarCode[day.type.fore - 1].color }"></span></div></eg-tool-tip><eg-tool-tipplacement="top"trigger="hover"v-if="day.type && day.type.after && day.type.fore !== day.type.after"><span slot="tipMain">{{ "下午" + calendarCode[day.type.after - 1].name }}</span><div slot="main"><spanclass="day-kq day-kq-type":style="{ backgroundColor: calendarCode[day.type.after - 1].color, marginRight: '2px' }"></span></div></eg-tool-tip></p></li></ul></div></div>
</template><script>
export default {name: "CardCalendar",data() {return {WEEKTABLE: [{cn: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],cns: ["日", "一", "二", "三", "四", "五", "六"],en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]},{cn: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],cns: ["一", "二", "三", "四", "五", "六", "日"],en: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}],// 后台返给我// status: [//   {//     day: 2,//     fore: 1,//     after: 1//   },//   {//     day: 5,//     fore: 3,//     after: 0//   },//   {//     day: 18,//     fore: 2,//     after: 3//   },//   {//     day: 28,//     fore: 4,//     after: 4//   }// ],monthSatus: [],curDate: {d: new Date().getDate(),y: new Date().getFullYear(),m: new Date().getMonth() + 1},selectDate: {d: new Date().getDate(),y: new Date().getFullYear(),m: new Date().getMonth() + 1},attrbutePicker: {type: "month",format: "YYYY-MM",allowClear: false,width: 120},days: 31,preDays: 31,nextDays: 30,MonthNextDayInWeek: 1,MonthFirstDayInWeek: 1,calendRows: 5,calendarD: [],calendarType: 0,// 考勤状态码表calendarCode: [{name: "迟到",code: 1,color: "#F5A60A"},{name: "早退",code: 2,color: "#F5A60A"},{name: "缺卡",code: 3,color: "#F5A60A"},{name: "旷工",code: 4,color: "#F65242"},{name: "请假",code: 5,color: "#1FC48D"},{name: "班",code: 6,color: "rgba(0, 0, 0, 0.9)"},{name: "休",code: 7,color: "rgba(0, 0, 0, 0.5)"}],colors: ["#F5A60A", "#F5A60A", "#F5A60A", "#F65242", "#1FC48D", "rgba(0, 0, 0, 0.9)", "rgba(0, 0, 0, 0.5)"],colorsH: ["#F5A60A", "#F5A60A", "#F65242", "#1FC48D"],calendarH: null,status: [],ycqts: 21,selectMonth: new Date()// 后台传给我// calendarH: [//   {//     name: "迟到",//     val: 1//   },//   {//     name: "早退",//     val: 0//   },//   {//     name: "缺卡",//     val: 1//   },//   {//     name: "旷工",//     val: 1//   },//   {//     name: "请假",//     val: 1//   }// ]};},mounted() {this.getKqdata();},methods: {getKqdata() {let par = {serviceName: "emp",servicePath: "attendanceInfo",time: this.selectDate.y + "-" + this.getMonthText()};this.$request(par).then(result => {if (result.status == "1") {// this.commonData.days = result.msgDetail;this.calendarH = result.msgDetail ? result.msgDetail.calendarh : null;this.status = result.msgDetail && result.msgDetail.status ? result.msgDetail.status : [];this.ycqts = result.msgDetail ? result.msgDetail.YCQDAYS : 21;this.$emit("getSatatus", this.calendarH);this.getSelectMonth();} else {this.$message.error(result.msgInfo);}});},getMonthText() {return this.selectDate.m < 9 ? "0" + this.selectDate.m : this.selectDate.m;},nextMonth() {let select = new Date(this.selectMonth);let selectY = select.getFullYear();let selectM = select.getMonth() + 1;if (selectM == 12) {selectM = 1;selectY = selectY + 1;} else {selectM++;}this.selectMonth = "" + selectY + "-" + this.getSelectM(selectM) + "";this.formChange();},preMonth() {let select = new Date(this.selectMonth);let selectY = select.getFullYear();let selectM = select.getMonth() + 1;if (selectM == 1) {selectY = selectY - 1;selectM = 12;} else {selectM--;}this.selectMonth = "" + selectY + "-" + this.getSelectM(selectM) + "";this.formChange();},formChange() {this.selectDate = {y: new Date(this.selectMonth).getFullYear(),m: new Date(this.selectMonth).getMonth() + 1};this.selectDate.d = this.getMonthDays(this.selectDate.y, this.selectDate.m);this.getKqdata();},getSelectM(m) {if (m < 10) {return "0" + m;} else return m;},getSelectMonth() {this.calendarD = this.getMonthDaysArray(this.selectDate.y, this.selectDate.m, this.curDate.d, this.calendarType);},getcalendarKqStatus(type) {if (type == 1 || type == 2 || type == 3) {return "异";} else {return this.calendarCode[type - 1].name;}},getDataStyle(day) {if (day.curDay) {return "#ffffff";}if (!day.isThisMonth) {return "rgba(0, 0, 0, 0.3)";}if (day.weekDay == "星期日" || day.weekDay == "星期六") {return "rgba(0, 0, 0, 0.5)";}// else {//   return "rgba(0, 0, 0, 0.9)";// }},getMonthsStatus() {for (let i = 1; i <= this.days; i++) {this.monthSatus[i] = {fore: 0,after: 0};this.status.forEach(item => {if (item.day == i) {this.monthSatus[i] = {fore: item.fore,after: item.after};}});}},resetMonthDays() {// console.log(this.MonthFirstDayInWeek);// console.log(this.days);let days = 0;if (this.MonthFirstDayInWeek == 7) {days = 5 * 7;} else {days = 7 - this.MonthFirstDayInWeek + 4 * 7;}if (this.days > days) {this.calendRows = 6;} else {this.calendRows = 5;}},getMonthDaysArray(year, month, day, type) {var dayArrays = [];this.days = this.getMonthDays(year, month);this.getMonthsStatus();// 处理临界值， 一月份和12月份let nextMonth = month + 1;let preMonth = month - 1;let nextYear = year;let preYear = year;if (month == 12) {nextMonth = 1;nextYear = year + 1;}if (month == 1) {preMonth = 12;preYear = year - 1;}this.preDays = this.getMonthDays(preYear, preMonth);this.nextDays = this.getMonthDays(nextYear, nextMonth);// 当前月第一天周几this.MonthFirstDayInWeek = this.getWeekday(year, month, 1);// 初始化当前日历的行数 可能是六行也可能是五行this.resetMonthDays();// 下个月第一天周几this.MonthNextDayInWeek = this.getWeekday(nextYear, nextMonth, 1);type = !type || type !== 1 ? 0 : 1;//上月在当月日历面板中的排列if (this.MonthFirstDayInWeek != 7) {for (let i = 0; i < this.MonthFirstDayInWeek; i++) {dayArrays.push({dayNum: this.preDays - this.MonthFirstDayInWeek + i + 1,weekDay: this.WEEKTABLE[type].cn[i],isThisMonth: false});}}//当月日历面板中的排列for (let i = 1; i <= this.days; i++) {let weekDayFlag = (this.MonthFirstDayInWeek + i - 1) % 7;dayArrays.push({dayNum: i,weekDay: this.WEEKTABLE[type].cn[weekDayFlag],curDay: year == this.curDate.y && month == this.curDate.m ? i === +day : false,type: this.monthSatus[i],isThisMonth: true});}//下月在当月日历面板中的排列for (let i = 1; i <= 7 - this.MonthNextDayInWeek; i++) {let weekDayFlag = (this.MonthFirstDayInWeek + this.days + i - 1) % 7;dayArrays.push({dayNum: i,weekDay: this.WEEKTABLE[type].cn[weekDayFlag],isThisMonth: false});}return dayArrays;},getMonthDays(year, month) {return new Date(year, month, 0).getDate();},getWeekday(year, month, day) {let str = year + "-" + month + "-" + day;let dd = new Date(str);let sd = dd.getDay() == 0 ? 7 : dd.getDay();return sd;},getweeksInMonth(year, month) {var days = this.getMonthDays(year, month);var FirstDayWeekday = this.getWeekday(year, month, 1);return Math.ceil(days + FirstDayWeekday);}}
};
</script><style lang="scss">
.card-calendar {height: 500px;position: relative;.calendar-title {display: flex;align-items: center;margin: 8px $spacing-xxl $spacing-s;color: rgba(0, 0, 0, 0.9);.opperate-icon {text-align: center;line-height: 32px;width: 26px;height: 32px;background: white;border: 1px solid #dcdfe6;}.opperate-pre {border-right: none;border-radius: 4px 0px 0px 4px;.anticon {color: #c0c4cc;}}.opperate-next {border-left: none;border-radius: 0px 4px 4px 0px;.anticon {color: #c0c4cc;}}.eg-date-picker {.ant-calendar-picker-input {border-radius: 0;}}}.empty-status {height: 38px;background: rgba(0, 0, 0, 0.02);color: $text-color;text-align: center;line-height: 38px;}.calendar-head__he {height: 92px;background: rgba(0, 0, 0, 0.02);.calendar-head-c {max-width: 600px;height: 92px;margin: 0 auto;.head-c-lists {.head-c-list {width: 25%;float: left;.list-t {line-height: 22px;text-align: center;color: $text-color;margin-top: $spacing-xl;}.list-b-1 {height: 32px;line-height: 32px;text-align: center;color: $heading-color;font-weight: 600;margin-top: 6px;.list-b-text {font-size: $font-xxl;}}.list-b-2 {height: 32px;line-height: 32px;text-align: center;color: $text-color-disabled;margin-top: 6px;.list-b-text {font-size: $font-xxl;color: $text-color-disabled;}}}}}}.calendar-c__he {max-width: 540px;height: 362px;margin: 0 auto;overflow: hidden;width: 100%;.week-lists {margin-top: $spacing-xxl;.week-list {float: left;width: 14.2%;text-align: center;line-height: 22px;text-align: center;@include head-01;}}.day-lists {margin-top: $spacing-xl;.day-list {float: left;width: 14.2%;margin-top: $spacing-xl;text-align: center;text-align: center;color: $heading-color;p {margin: 0px;}.list-day {width: 24px;height: 24px;line-height: 24px;// margin-left: 26px;margin: 0 auto;}.curday {background-color: $primary-color;border-radius: 12px;@include title-dark-01;}.list-day-status {height: 20px;.day-kq {display: inline-block;width: 8px;height: 8px;line-height: 8px;border-radius: 50%;}}}}.isSixRow {.day-list {margin-top: $spacing-m;}}}
}
</style>

vue 带节假日考勤状态的日历相关推荐

php 日历设置当月节假_带节假日设置的日历
插件描述:带节假日设置的日历在js中,$(function() { var jjrmodelidlist; //用于存放从数据库取出的所有设置过节假日的id var jjrmodeltimelist ...
android 钉钉考勤日历,vue钉钉考勤日历 vue实现钉钉的考勤日历
想了解vue实现钉钉的考勤日历的相关内容吗,张张张立宏在本文为您仔细讲解vue钉钉考勤日历的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue钉钉考勤日历,vue钉钉考勤,vue考勤日历 ...
sys-calendar.js带节假日的日历插件
下载地址 sys-calendar.js带节假日的日历插件,代码引用比较多. dd:
class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
vue带缩略图的轮播图插件 View demo 查看演示Download Source 下载源 Today we want to show you how to create a responsive ...
VUE jQuery+VUE带实时节气创意圆形罗盘时钟动画特效
1.外部引用的js文件 ①jquery版本:jquery-3.3.1.js(可以自己找一个jQuery版本,不要太旧就行) <script type="text/javascript& ...
vue+elementui微信支付状态问题
vue+elementui微信支付状态问题常见的支付也就微信支付宝和银行卡等支付方式,近期项目中有用到支付,主要是pc端一个业务包需要顾客去支付,支付成功之后就可以使用相关服务. 顾客选择相关类型的 ...
vue实现带节假日的日历
https://blog.csdn.net/weixin_41884808/article/details/110433903
vue实现考勤排班日历（备忘）
效果图代码  <template><div><div class="rili" style="width: 1 ...
vue —— 带农历的日历功能
闲来无事做一些简单功能,一边练习VUE的使用,一边锻炼逻辑思维能力.之前有个项目需要自己写一个月份选择器,由此想起来做一个简单的日历,做起来有一些自己感兴趣的东西,也为了记录一下,发个帖首先,我做的 ...

vue 带节假日考勤状态的日历

vue 带节假日考勤状态的日历相关推荐

最新文章

热门文章