用vue设计一个日历表


Posted in Vue.js onDecember 03, 2020

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

先贴图

用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 日历的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
如何实现vue的tree组件
Dec 03 #Vue.js
Vue实现图书管理小案例
Dec 03 #Vue.js
Vue router安装及使用方法解析
Dec 02 #Vue.js
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
vue的for循环使用方法
2019/02/12 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python格式化字符串实例总结
2014/09/28 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python3爬虫怎样构建请求header
2018/12/23 Python
django基础学习之send_mail功能
2019/08/07 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
单位办理社保介绍信
2014/01/10 职场文书
学校读书活动总结
2014/06/30 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
Python基础 括号()[]{}的详解
2021/11/07 Python