vue3.0实现考勤日历组件使用详解
作者：捕风的紫色鸢尾
这篇文章主要为大家详细介绍了vue3.0实现考勤日历组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue3.0实现考勤日历组件使用的具体代码，供大家参考，具体内容如下
自定义日历组件，首先我们要明确需求与面板展示内容
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;
};以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。