自定义极简日历组件的尝试

·  阅读 1132

目的

系咁噶(是这样的),最近做一个考勤管理的需求,需要通过日历展示员工的考勤状态等,那么第一时间使用了element及ant-design的calendar的组件,另外还尝试使用fullcalendar这个插件,确实是个强大的插件,只不过在使用自定义内容时也碰壁了

前者找不到固定月份展示的办法(选择完日期后会往前推移,没法只当前月的日期,还有自定义内容也不需求满足),后者自定义内容后操作单个日期一些默认事件的影响,最后干脆决定在需求不复杂的情况下自己实现日历

实现

先展示下效果大概是这样的

image.png

通过一顿操作,页面成功渲染出来,实现过程分以下步骤

  1. 创建表头周数据,月数据

    周数据[周日-周六]可以直接定义

    月数据则需借助moment.js计算出某年某月的天数

    monthsDay() {
      let monthDate = moment(this.dataform.date)
        .format('YYYY-MM')
        .split('-')
      return this.getDaysOfMonth(Number(monthDate[0]), Number(monthDate[1]))
    },
    //计算月份天数
    getDaysOfMonth(year, month) {
      switch (month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
          return 31
        case 4:
        case 6:
        case 9:
        case 11:
          return 30
        case 2:
          return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28
        default:
          return 0
      }
复制代码

2.算出每月首天的周几,并准确对应至日历位置 这里我采用填补空位的方法,比如9月第一天的是周三,那么获取出每月天数前补充三天的空数据,那么9月1日的数据在遍历日历表格可以准确对应至周三的位置,方式如下

    //获取所选月份的第一天
    getCurrentMonthFirst() {
      let startdate = new Date(this.dataform.date)
      startdate.setDate(1)
      return moment(new Date(startdate)).format('YYYY-MM-DD')
    },
    //计算当天为星期几
    weekDay(date) {
      let dt = new Date(date.split('-')[0], date.split('-')[1] - 1, (date = date.split('-')[2]))
      return dt.getDay()
    },
    //循环补充数据,计算出周几就补几天
    for (let i = 0; i < this.weekDay(this.getCurrentMonthFirst()); i++) {
         this.columnData.unshift({
             date: '',
         })
    }
    
复制代码

3.最后对周末的日期加上类,加背景色

    <div class="calendar-date" :class="isWeekDay(day.date) ? 'disable-background' : ''">
    isWeekDay(date) {
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      let dt = new Date(date.split('-')[0], date.split('-')[1] - 1, (date = date.split('-')[2]))
      return weeks[dt.getDay()] == '六' || weeks[dt.getDay()] == '日'
    },
复制代码

最后根据获取月份考勤的数据和计算出月数据匹配上日期就可以了,效果图如上,一个极简的日历组件就实现了,日历上的操作就不一一展示了,后续如果有获取到节假日等的数据也可以在日历显示节假日补充上,组件非常粗糙,只是一个小尝试.见笑了,欢迎吐槽[狗头]

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改