vue节假日日历组件

先上效果图

一、整个数据总计为42个格子，格式为六行七列，单个天数数据格式datas单个字段

day: 1                   //当前是几号
isMonth: ""               //是否是当前月份（空值是当前月，prev上个月，current下个月，判断class）
isToday: false          //是否是今天，对今天要进行颜色高亮
isWork: false           //当前是否是工作日
isXiu: false            //当前是否休息
time: "2021-11-1"     //当前日期全称
timeStamp: 1635696000000//当前日期时间戳

ps:当前代码中只标识了上个月为班、下个月为休（上方图可以体现），可自行获取节假日信息并修改日历数据，需获取以当前月为中心的上下月共计三个月数据，修改isWork与isXiu字段（英语菜0.0）
html

<div class="time-section"><div class="sec-search"><div class="sea-left"></div><div class="sea-right"></div></div><div class="calendar-cont"><div class="calendar-header"><div class="ehader-left"><span>{{this.year}}年{{this.month}}月</span></div><div class="ehader-right"><div class="select-month"><div class="prew-month" @click="prevMonth"><el-button style="border:0" >上个月</el-button></div><div class="today" @click="selToday"><el-button style="border:0" >今天</el-button></div><div class="current-month" @click="nextMonth"><el-button style="border:0" >下个月</el-button></div></div></div></div><div class="calendar-body"><div class="calendar-table"><table><thead><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>天</th></thead><tbody><tr v-for="(val,inx) in datas" :key="inx"><td v-for="(item,index) in val" :key="index":class='[item.isMonth,{"is-today":item.isToday},{"is-selected":selectTimeStep == item.timeStamp}]'@click="clickDay(item)"@contextmenu.prevent="contextMenuDay(item,$event)"><div><span>{{item.day}}</span><span v-if="item.isXiu || item.isWork":class='[{"xiu":item.isXiu},{"work":item.isWork}]'>{{item.isXiu ? '休' : '班'}}</span></div></td></tr></tbody></table></div></div></div></div><div class="dialog-set" ref='dialogSet' v-show="showDom"><ul><li><span>设置为休息日</span></li><li><span>设置为工作日</span></li><li><span>取消所有设置</span></li><li @click="showDom = false"><span>取消</span></li></ul></div>

export default {data() {return{year: null,           //当前正在查阅年份（翻到2022年那就是2022）month: null,        //当前正在查阅月份day: null,            //当前正在查阅天today:null,            //今日日期datas:[],         //数据格式isToday:[],           //今天日期 拆分为数组selectTimeStep:null,//选中日期时间戳showDom:false      //右击显示弹窗内容}},created(){const date = new Date();this.isToday[0] = this.year = date.getFullYear();this.isToday[1] = this.month = date.getMonth() + 1;this.isToday[2] = this.day = date.getDate();this.today = `${this.year}-${this.month}-${this.day}`;this.selectTimeStep = new Date(`${this.isToday[0]}/${this.isToday[1]}/${this.isToday[2]}`).getTime();this.initDate()},mounted(){document.onclick = ()=>{this.showDom = false}},methods:{//初始化日历数据initDate(){let lastMonth = [];let calendarMonth = [];let isWeek =  new Date(this.year,this.month -1 , 1).getDay() ==0 ? 6 :new Date(this.year,this.month -1 , 1).getDay()-1         //当月开始是周几let isMonthDay = new Date(this.year,this.month-2,0).getDate();         //当月多少天let isPrevMonthDay = new Date(this.year,this.month-1,0).getDate();         //上个月是多少天for(let i=1; i<isMonthDay+1; i++){calendarMonth.push({day:i,timeStamp:new Date(`${this.year}/${this.month}/${i}`).getTime(),isWork:false,isXiu:false,isMonth:'',isToday:this.isToday[0] == this.year && this.isToday[1] == this.month && this.isToday[2] == i,time:`${this.year}-${this.month}-${i}`,})}for(let k=isPrevMonthDay-isWeek; k<isPrevMonthDay; k++){lastMonth.push({day:k,timeStamp:new Date(`${this.month == 12 ? this.year-1 : this.year}/${this.month-1}/${k}`).getTime(),isWork:true,isXiu:false,isMonth:'prev',isToday:false,time:`${this.month == 12 ? this.year-1 : this.year}-${this.month-1}-${k}`,})}for(let y=1; y<43-(isMonthDay + isWeek);y++){calendarMonth.push({day:y,timeStamp:new Date(`${this.month == 12 ? this.year+1 : this.year}/${this.month+1}/${y}`).getTime(),isWork:false,isXiu:true,isMonth:'current',isToday:false,time:`${this.month == 12 ? this.year+1 : this.year}-${this.month+1}-${y}`})}calendarMonth = [...lastMonth,...calendarMonth]this.datas = this.spArr(calendarMonth,7);},//格式化数据spArr(arr, num){if(num < 1){return newArr}let newArr = [];for(let i =0;i<arr.length;){newArr.push(arr.slice(i,i+=num));}return newArr;},//上个月prevMonth(){if(this.month < 2){this.month = 12;this.year -= 1}else{this.month -= 1}this.initDate()},//下个月nextMonth(){if(this.month > 11){this.month = 1;this.year += 1}else{this.month += 1}this.initDate()},//回到今天selToday(){this.year = this.isToday[0]this.month = this.isToday[1]this.day = this.isToday[2]this.initDate()},//点击某一天clickDay(item){if(item.isMonth == 'prev'){this.prevMonth()}else if(item.isMonth == 'current'){this.nextMonth()}this.selectTimeStep = item.timeStamp},//右击某一天contextMenuDay(item,event){this.selectTimeStep = item.timeStampthis.showDom = truethis.$refs.dialogSet.style.left = event.x + 'px';this.$refs.dialogSet.style.top = event.y + 'px';},}}

css

<style type="text/scss" lang="scss">.time-section{padding: 10px;.sec-search{display: flex;}.sea-left{flex: 1;display: flex;}.sea-right{display: flex;}.calendar-cont{border: 1px solid rgb(235, 238, 245);padding: 5px 10px;margin-top: 10px;.calendar-header{display: flex;padding-bottom: 5px;.ehader-left{flex: 1;display: flex;align-items: center;span{color: #000;}}.ehader-right{.select-month{display: flex;> div{border: 1px solid rgb(235, 238, 245);cursor: pointer;}:nth-child(2){border-left: 0;border-right: 0;}}}}.calendar-body{border: 1px solid rgb(235, 238, 245);.calendar-table{table{width: 100%;th{padding: 10px 0;color: rgb(96, 98, 102);    }tr{.is-selected{background-color: rgb(242, 248, 254);color: rgb(64, 158, 255);;}.is-today{color: rgb(64, 158, 255);;}.prev{color: rgb(192, 196, 204);}.current{color: rgb(192, 196, 204);}td{vertical-align: top;border-top: 1px solid rgb(235, 238, 245);border-right: 1px solid rgb(235, 238, 245);transition: background-color 0.2s ease 0s;div{height: 85px;padding: 8px;display: flex;span:first-child{flex: 1;}.xiu{color: #198FFF;}.work{color:red;}}&:hover{cursor: pointer;background-color: rgb(242, 248, 254);}}}}}}}}.dialog-set{position: fixed;left: 50%;top: 50%;ul{border-radius: 8px;border: 1px solid rgb(228, 231, 237);overflow: hidden;li{padding: 10px 15px;cursor: pointer;background: #fff;&:hover{background: rgb(245, 247, 250);}span{color: rgb(96, 98, 102);}}}}
</style>

时间紧迫没优化代码，后期会更新一波

vue节假日日历组件相关推荐

一个vue的日历组件
说明: 1.基于element-ui开发的vue日历组件. 地址更新: 1.增加value-format指定返回值的格式 2.增加头部插槽自定义头部 <ele-calendar >< ...
VUE自定义日历组件，计算年月日，上个月份的空白展示，点击某一天进入详情页面
效果图: 背景描述: 产品提出需求,需要日历来配置每一天的商品价格.刚开始使用的element-ui的el-calendar组件,由于样式.跳转.点击事件等功能都不好控制,所以自己写了一个日历组件.完 ...
vue 自定义日历组件
<template> <div class=""> <div class="calendarTraffic" name=" ...
vue周日历组件，从周一开始周日结束
活动日历组件,从周一开始功能: 1.左右按钮为[上一周][下一周].日期显示一到日(对应为周一到周日) 2.默认选中当前日期: 3. 点击对应月份的时间,则该月份亮起,顶部时间显示对应月份. ...
vue自定义日历组件（12日历平铺） pc/移动
文章目录前言前言思路: 获取每个月天数,把每个月天数给数组中的day 再day天数给list的name 获取12个月的年月日把获取的年月日和选中的年月日对比如果相等让list中的type变为 ...
vue自定义日历组件
代码地址 https://github.com/nan1010082085/vue-components/tree/master/CustomCalendar 享一下组件目录 tip: 组件功能: 展 ...
vue 日历翻拍效果_VUE实现日历组件功能
哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是 ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
vue展示日历考勤展示_vue实现日历组件
1.当前组件说明一个用vue实现的简单日历组件,可以手动设置日历的宽高,未设置时,有默认宽高,设置后,其中的每个日期项的宽高可以根据设定的宽高自适应.可以设置当前选中日期,可以设置时间可用范围,可以 ...

vue节假日日历组件

vue节假日日历组件相关推荐

最新文章

热门文章