vue3.0考勤日历组件
捕风的紫色鸢尾 人气:1自定义日历组件,首先我们要明确需求与面板展示内容
1、周日~周六。
2、当前月日历1~(28/29/30/31),当前月1号如果不是周日,需要上月最后日历补全,当月最后一天不是周六需要下月开始日历补全。
3、切换至上月,切换至下月按钮
4、当前年月展示
5、如果某日有考勤异常,考勤异常日期标记
6、当前日期展示展示为‘今’
7、点击上月日期切换至上月面板并选中该日期弹出该日期考勤信息
8、点击下月日期切换至下月面板并选中该日期弹出该日期的考勤信息
9、点击当前月日期则选中当前日期并弹出该日期的考勤信息
首先日历面板实现
HTML结构如下
<ul class="week"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <ul class="dateList"> <li v-for="item in dateList.List" @click="intraday(item, item.date)" :class="item.class" :date="item.date" :key="item" > <div>{{ item.text }}</div> <i></i> </li> </ul>
其中dateList为我们js计算出的当前面板应该展示的日历数组对象(包括上月的日期、当月日期和下月日期),item.class为当前日期展示样式的类名(包括上月日期样式‘upMonth’,下月日期样式‘lastMonth’,假日样式‘Holiyday’,选中样式‘selected’,今天样式‘today’,请假样式‘leave’,考勤异常样式‘absent’),item.date为日期(xxxx-xx-xx),item.text为当前日,今天展示为‘今’,‘<i></i>’标签用于展示考勤异常和请假,intraday方法为点击某日
面板渲染方式,实现dateList数组的计算
const MonthDay = ref([31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]); //确定每月天数 const calendar = (n, seletDay) => { //n为0表示当月,n为-1表示上月,n为1表示下月,seletDay默认选中日期 var oDate = new Date(); //定义时间 oDate.setMonth(oDate.getMonth() + n); //设置月份, year.value = oDate.getFullYear(); //年,获取当前年份 month.value = oDate.getMonth(); //月,获取当前月份(0-11) var allDay = MonthDay.value[month.value]; //计算本月有多少天 var upMonthDay = MonthDay.value[month.value == 0 ? 11 : month.value - 1];//计算上个月有多少天 //判断闰年,如果是闰年的2月份,当月总天数为29天 if (month.value == 1) { if ( (year.value % 4 == 0 && year.value % 100 != 0) || year.value % 400 == 0 ) { allDay = 29; } } //判断本月第一天是星期几 oDate.setDate(1); //时间调整到本月第一天 var weekStar = oDate.getDay(); //读取本月第一天是星期几 oDate.setDate(allDay); //时间调整到本月最后一天 var weekEnd = oDate.getDay(); //读取本月最后一天是星期几 var dateArry = []; //上月日期插入数组 for (var j = upMonthDay - weekStar; j < upMonthDay; j++) { let obj = { class: ["upMonth"], date: year.value + "-" + (month.value < 10 ? "0" : "") + (month.value + 1 - 1) + "-" + (j < 9 ? "0" : "") + (j + 1), text: j + 1, day: j + 1, }; dateArry.push(obj); } //当月日期插入到dateList for (var i = 1; i <= allDay; i++) { let obj = { class: [], date: year.value + "-" + (month.value < 9 ? "0" : "") + (month.value + 1) + "-" + (i < 10 ? "0" : "") + i, text: i, day: i, }; //判断是否当月(非当月) if ( year.value != today.getFullYear() || month.value != today.getMonth() ) { if (seletDay && seletDay != "n") { //存在默认选中日期时 if (i == seletDay) { obj.class.push("selected"); //默认选中传入日期 upitem = obj; } } else if (i == 1) { //没有默认选中日期时默认选中1号 //判断是否是1号 obj.class.push("selected"); //默认选中1号 upitem = obj; } }else { //(当月) // 判断是否当天 if (format(today) == obj.date) { //(当天) obj.class.push("today"); obj.text = "今"; if(!seletDay || seletDay == "n"){ //没有默认选中日期时默认选中‘今天' obj.class.push("selected"); upitem = obj; } }else{ if (seletDay && seletDay != "n") { //非当天 if (i == seletDay) { obj.class.push("selected"); //默认选中传入日期 upitem = obj; } } } } if (findDate(monthDate, 'perday', obj.date)!=-1) { var k = findDate(monthDate, 'perday', obj.date); //判断是否节假日 if (monthDate[k].isworkday == "否") { obj.class.push("Holiyday"); } else if ( //判断考勤异常 monthDate[k].attendflags != "迟到" ) { obj.class.push("absent"); } else if ( //判断请假 monthDate[k].leaveflags == "请假" ) { obj.class.push("leave"); } } dateArry.push(obj); } //下月日期插入到dateList for (var k = 1; k <= 6 - weekEnd; k++) { let obj = { class: ["lastMonth"], date: year.value + "-" + (month.value < 8 ? "0" : "") + (month.value + 1 + 1) + "-" + (k < 10 ? "0" : "") + k, text: k, day: k, }; dateArry.push(obj); } dateList.List = dateArry; };
上月、下月切换按钮点击实现
html部分:
<div class="calendarTitle"> <-- 切换至上月--> <img class="upMonth" src="../assets/images/up.png" @click="upMonth('n')" //传入‘n'表示没有默认选中 /> <h4> <span>{{ month + 1 }}月</span> <span>{{ year }}年</span> </h4> <-- 切换至下月--> <img class="lastMonth" src="../assets/images/last.png" @click="lastMonth('n')" //传入‘n'表示没有默认选中 /> </div>
js部分:
// 向上翻月 const upMonth = (day) => { monthDate = ""; total.obj = ""; normally.value = true; calendar(--iNow, day); }; // 向下翻月 const lastMonth = (day) => { monthDate = ""; total.obj = ""; normally.value = true; calendar(++iNow, day); };
点击某日intraday方法
// 点击日历图上某天 const intraday = async (item, date) => { if (item.class.indexOf("upMonth") > -1) { //如果点击的是上月日期则切换到上月日历面板 upMonth(item.day); return; } if (item.class.indexOf("lastMonth") > -1) {//如果点击的是下月日期则切换到下月日历面板 lastMonth(item.day); return; } //点击当前月日期 upitem.class[upitem.class.indexOf("selected")] = null; //上次点击日期去除选中样式 item.class.push("selected"); //当前点击日期加上选中样式 upitem = item; };
加载全部内容