用vue设计一个日历表

230 阅读 0 评论 152 点赞

我是靠谱客的博主知性白开水，最近开发中收集的这篇文章主要介绍用vue设计一个日历表，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

日历的功能，我们会经常用到，且逻辑比较复杂，小算法较多，花了半天时间写了个，特此详记。

先贴图

功能阐述：返回本月不多说，设置工作日和节假日是为了公司制度需要，后台会有假日表来记录。

为了适应于vue框架，很多jquery的方法用不上，例如addClass及removeClass，所以可能某些地方做的比较繁琐。

<template>
  <div>
  <div class="date">

    <!-- 年份 月份 -->
    <div class="month">
      <i class="el-icon-arrow-left" @click="pickPre(currentYear,currentMonth)"></i>
      <i>{{ currentYear }} 年 {{ currentMonth }} 月</i>
      <i class="el-icon-arrow-right" @click="pickNext(currentYear,currentMonth)"></i>
    </div>
    <!-- 星期 -->
    <ul class="weekdays">
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li style="color:#0A0A0A">六</li>
      <li style="color:#0A0A0A">日</li>
    </ul>
    <!-- 日期 -->
    <div class="bodyDiv">
    <ul class="days" v-for="(value,index1) in daysUL">
    <li @click="pick(day,index+index1*7)" v-for="(day, index) in value" :class="[{'ban':isBan[index+index1*7]},{'xiu':isXiu[index+index1*7]}]" >
      <!--本月-->
      <span v-if="day.getMonth()+1 != currentMonth" class="other-month" :class="{'selected':isSelected[index+index1*7]}">{{ day.getDate() }}</span>
      <span v-else :class="{'selected':isSelected[index+index1*7]}">
     <!--今天-->
     <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
     <span v-else>{{ day.getDate() }}</span>
     </span>
    </li>

  </ul>
    </div>
    <hr style="height:2px;border:none;border-top:2px dotted #185598;" />
  </div>
  <div class="button">
    <div><el-button type="primary" size="large" @click="returnNow()">返回本月</el-button></div>
    <div><el-button type="primary" size="large" @click="setRestOrWork('R')">设置为节假日</el-button></div>
    <div><el-button type="primary" size="large" @click="setRestOrWork('W')">设置为工作日</el-button></div>
    <div><el-button type="primary" size="large" @click="cancel()">取消</el-button></div>
  </div>
  </div>
</template>

<script>
  import { calendarMsgService } from './CalendarMsgService'
  export default {
    name: 'date',

    data () {
      return {
        currentYear: 1970,  // 年份
        currentMonth: 1, // 月份
        currentDay: 1,  // 日期
        currentWeek: 1,  // 星期
        firstWeek:1,
        days: [],
        daysUL:[],
        params:{
          selectDay:'',
          type:''
        },
        isSelected:[],
        isBan:[],
        isXiu:[],
        restDays:{
          year:'',
          month:'',
          day:'',
          resttype:'',
          restdate:''
        },
        restDaysList:[],
        banList:[],
        xiuList:[],
        selectIndex:''
      }
    },

    created () {
      this.initData(null)
    },

    methods: {
      //格式化日期
      formatDate (year, month, day) {
        const y = year
        let m = month
        if (m < 10) m = `0${m}`
        let d = day
        if (d < 10) d = `0${d}`
        return `${y}-${m}-${d}`
      },

      initData (cur) {
        debugger;
        let date = ''
        if (cur) {
          date = new Date(cur)
        } else {
          date = new Date()
        }
        this.currentDay = date.getDate()     // 今日日期 几号
        this.currentYear = date.getFullYear()    // 当前年份
        this.currentMonth = date.getMonth() + 1  // 当前月份
        this.currentWeek = date.getDay() // 1...6,0  // 今天是星期几

        //当前月的第一天是星期几
        date.setDate(1);
        this.firstWeek = date.getDay();

        if (this.firstWeek === 0) {
          this.firstWeek = 7;
        }
        const str = this.formatDate(this.currentYear, this.currentMonth, 1)// 今日日期 年-月-日
        this.days.length = 0

        // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 42- this.firstWeek
        for (let i = this.firstWeek - 1; i >= 0; i -= 1) {
          const d = new Date(str)
          d.setDate(d.getDate() - i)
          this.days.push(d)
        }
        //处理1号是星期天为 7 的情况， 为7天就直接放在daysUL里
        if (this.days.length % 7 === 0){
          this.daysUL.push(this.days);
          this.days = [];
        }

        for (let i = 1; i <= 42 - this.firstWeek; i += 1) {
          const d = new Date(str);
          d.setDate(d.getDate() + i);
          this.days.push(d);    //一个 days 就是一行7天 daysUL 就是个数组，里面有六个days 就是六行42天
          if (this.days.length % 7 === 0){
            this.daysUL.push(this.days);
            this.days = [];  //清空重新存放天数
          }
        }
        //调后台接口，获取当前年，当前月的 班休时间
        calendarMsgService.getRestDays({currentYear:this.currentYear,currentMonth:this.currentMonth}).then(res => {
          if (res.code === 0){
            debugger;
            this.restDaysList = res.content;
            this.dealResult(this.currentYear,this.currentMonth);
          }
        })
      },
      setRestOrWork(type) {
        if (this.onlySelect()) {
          this.params.type = type;
          debugger;
          calendarMsgService.addRestDays(this.params).then(res => {
            if (res.code === 0) {
              this.$message({
                message: '设置成功！',
                type: 'success'
              })
              if (type == 'R'){
                this.isXiu[this.selectIndex] = true;
              }
              if (type == 'W'){
                this.isBan[this.selectIndex] = true;
              }
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
            this.params.selectDay = '';
            this.params.type = '';
          })

        }
      },
      cancel() {
        if (this.onlySelect()) {
          calendarMsgService.cancelRestDays(this.params).then(res => {
            if (res.code === 0) {
              this.$message({
                message: '取消成功！',
                type: 'success'
              })
              this.isXiu[this.selectIndex] = false;
              this.isBan[this.selectIndex] = false;
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
            this.params.selectDay = '';
            this.params.type = '';
          })
        }
      },

      // 上一個月  传入当前年份和月份
      pickPre (year, month) {
        this.daysUL = [];
        this.isSelected = [];
        const d = new Date(this.formatDate(year, month, 1))
        d.setDate(0)
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
        calendarMsgService.getRestDays({currentYear:this.currentYear,currentMonth:this.currentMonth}).then(res => {
          if (res.code === 0){
            debugger;
            this.restDaysList = res.content;
            this.dealResult(this.currentYear,this.currentMonth);
          }
        })
      },

      // 下一個月  传入当前年份和月份
      pickNext (year, month) {
        this.daysUL = [];
        this.isSelected = [];
        const d = new Date(this.formatDate(year, month, 1))
        d.setDate(42)
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
        //当点击下个月的时候，才会去拿该月的休息或者工作日的日期，而不是一下子都拿出来
        calendarMsgService.getRestDays({currentYear:this.currentYear,currentMonth:this.currentMonth}).then(res => {
          if (res.code === 0){
            debugger;
            this.restDaysList = res.content;
            this.dealResult(this.currentYear,this.currentMonth);
          }
        })
      },
      //算法
      dealResult(currentYear,currentMonth){
        debugger;
        this.banList = []; //把当前月的 工作日 放在一起
        this.xiuList = []; //把当前月的 休息日 放在一起
        this.isBan = [];  //设置标识，来确定用什么样的背景图
        this.isXiu = [];
        let zhouji = new Date(this.formatDate(currentYear, currentMonth, 1)).getDay(); //被查找的月份 1 号是星期几
        if (zhouji === 0){ // 0 就是星期天
          zhouji = 7;
        }
        for (let i = 0; i<this.restDaysList.length;i++){
          this.restDays = this.restDaysList[i];
          if (this.restDays.resttype === 'W') {
            let ban = this.restDays.day - 1 + (zhouji - 1);//重要算法，算出班日，在几号位
            this.banList.push(ban);
          }
          if (this.restDays.resttype === 'R'){
            let xiu = this.restDays.day - 1 + (zhouji - 1);//重要算法，算出休息日，在几号位
            this.xiuList.push(xiu);
          }
        }
        for (let m = 0; m < 42; m++) {  // banlist 里面放置的都是在日历上处于几号位，而不是工作日的日期，
          let nothave = true;      // 所以得把这些位置号拎出来，给它们于不同的样式
          for (let k = 0; k < this.banList.length; k++) {
            if (m == this.banList[k]) {
              this.isBan.push(true);
              nothave = false;
              break;
            }
          }
          if (nothave) {
            this.isBan.push(false);
          }

        }
        for (let n = 0; n < 42; n++) {  // 同上，来处理休息日
          let nothave = true;
          for (let k = 0; k < this.xiuList.length; k++) {
            if (n == this.xiuList[k]) {
              this.isXiu.push(true);
              nothave = false;
              break;
            }
          }
          if (nothave) {
            this.isXiu.push(false);
          }

        }

      },
      returnNow(){
        this.daysUL = [];
        this.initData(null);
      },
      // 当前选择日期
      pick (date,index) {
        debugger;
        this.selectIndex = index;
        this.isSelected = [];
        this.params.selectDay = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
        for (let i = 0; i < 42; i++) {
          if (index == i) {
            this.isSelected.push(true);
            continue;
          }
          this.isSelected.push(false);
        }
      },
      onlySelect(){
        debugger;
        if(this.params.selectDay === ''){
          this.$message({
            message: '请选择日期',
            type: 'warning'
          })
          return false;
        }
        return true;
      }
    },
  }

</script>

<style scoped>
  .date {
    height: 150px;
    width:1000px;
    color: #333;
    float: left;
  }
  .button{
    float: left;
    margin-left:110px;
    margin-top:120px;
  }
  .button>div{
    margin-top:70px;

  }
  .month {
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
  }

  .weekdays {
    background-color: #20A0FF;
    opacity: 0.6;
    display: flex;
    font-size: 28px;
    margin-top: 20px;
  }

  .days {
    display: flex;
  }

  li {
    flex: 1;
    font-size: 35px;
    width:50px;
    list-style-type:none;
    text-align: center;
    margin-top: 5px;
    line-height: 60px;
    cursor:pointer;
  }
  .selected{
    display: inline-block;
    width: 60px;
    height: 60px;
    color: #fff;
    border-radius: 70%;
    background-color: #1E90FF;
  }
  .ban{
    background-image: url(image/ban.jpg);
  }
  .xiu{
    background-image: url(./image/xiu.jpg);
    background-repeat: no-repeat;
  }
  .active {
    display: inline-block;
    width: 60px;
    height: 60px;
    color: #fff;
    border-radius: 50%;
    background-color: #324057;

  }
  i{
    margin-right:30px;
    cursor:pointer
  }

  .other-month {
    color: #EEC591;
  }

</style>

以上就是用vue设计一个日历表的详细内容，更多关于vue 日历的资料请关注靠谱客其它相关文章！