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

本文介绍如何使用Vue开发一个包含节假日并能记录迟到早退等考勤情况的考勤日历。首先确定日历显示的行数,通常为5行,特殊情况可能需要6行。计算当前月第一天的星期,结合本月天数判断是否需要补充上个月或下个月的日期。日历布局包括上月、当月和下月在日历面板中的排列。最后,给出了实现这一功能的基础方法和样式代码。
摘要由CSDN通过智能技术生成

开发日历开始首先要确定当前月份在日历中需要几行显示(一般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
  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值