vue 会议室日历预约组件

在vue里面的根据日历预约会议室组件,网上的日历预约组件都是英文文档很不好练习，自己写一个组件供大家参考，代码可运行

<template><div class="containes"><!-- 头部 --><div class="header"><div class="headerleft"><div class="tybox"><div style="backgroundColor: #1890ff;" class="selecttype"></div><div class="text">已预订</div></div><div class="tybox"><div style="backgroundColor: #72bbff" class="selecttype"></div><div class="text">当前选择</div></div><div class="tybox"><div style="border: 1px solid #EEEEEE " class="selecttype"></div><div class="text">空闲</div></div><div class="tybox"><div style="backgroundColor: #bbb" class="selecttype"></div><div class="text">不可预订</div></div></div><div class="headerright"><div><i class="el-icon-arrow-left" @click="backFn"></i><i class="el-icon-arrow-left"></i></div><div>{{date[0]}}</div><div><i class="el-icon-arrow-right"></i><i @click="nextFn" class="el-icon-arrow-right"></i></div></div></div><!-- 日历部分 --><div class="calendar"><div class="calendarleft"><div class="ctop"></div><div class="cbottom"><!-- 时间 --><div v-for="item in timeList" class="week"><div style="fontSize:14px;">{{ item }}</div></div></div></div><div class="calendarright"><div class="crtop"><div v-for="(item, index) in date" :key="index" class="rdate"><div style="fontSize:12px;">{{ item + weekArr[index] }}</div></div></div><div class="crbottom"><!-- 日历内容 --><template v-for="(item, index) in rili"><div :key="index" @click="selectcalendar(item)" :class="{box:true,selecolor:seleArr.findIndex(ite => ite===item)>-1}"></div></template></div></div></div></div>
</template><script>
console.log(new Date());
export default {mounted() {this.getDate();this.Rendering();// this.backDate()},data() {return {date: [],timeList: ["08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30",],weekArr: [],rili: [],seleArr: [],x:1};},methods: {// 获取日期getDate() {var today = new Date();var dateArr = [];for (var i = 0; i < 10*this.x; i++) {var newDate = new Date(today.getTime() + i * 1000 * 60 * 60 * 24);var year = newDate.getFullYear();var month =parseInt(newDate.getMonth()) + 1 > 9? parseInt(newDate.getMonth()) + 1: "0" + (parseInt(newDate.getMonth()) + 1);var day =newDate.getDate() > 9 ? newDate.getDate() : "0" + newDate.getDate();var fullDate = `${year}-${month}-${day}`;dateArr.push(fullDate);}this.date = dateArr.slice(10*(this.x-1),dateArr.length);// console.log("原", dateArr);// console.log("1", dateArr.slice(10*(this.x-1),dateArr.length).reverse());function isNull(object) {if (object == null || typeof object == "undefined") {return true;}return false;}// 获取 星期几function getWeek(dateString) {var date;if (isNull(dateString)) {date = new Date();} else {var dateArray = dateString.split("-");date = new Date(dateArray[0],parseInt(dateArray[1] - 1),dateArray[2]);}var weeks = new Array("日", "一", "二", "三", "四", "五", "六");return "星期" + weeks[date.getDay()];// return "星期" + "日一二三四五六".charAt(date.getDay);}let arr = [];dateArr.forEach((it) => {arr.push(getWeek(it));});this.weekArr = arr.slice(10*(this.x-1),arr.length);// console.log("2", arr.slice(10*(this.x-1),arr.length));},// 前几天的日期(x为负数的时候使用)backDate(){var today = new Date();var dateArr = [];// let x = -2 //-1的效果喝1的效果一样 从-2 开始for (var i = 0; i > 10 * this.x; i--) {var newDate = new Date(today.getTime() + i * 1000 * 60 * 60 * 24);var year = newDate.getFullYear();var month =parseInt(newDate.getMonth()) + 1 > 9? parseInt(newDate.getMonth()) + 1: "0" + (parseInt(newDate.getMonth()) + 1);var day =newDate.getDate() > 9 ? newDate.getDate() : "0" + newDate.getDate();var fullDate = `${year}-${month}-${day}`;dateArr.push(fullDate);this.date=dateArr.slice(10*(this.x+1)*-1,dateArr.length)// console.log("1.1", dateArr.slice(10*(this.x+1)*-1,dateArr.length));// console.log('2.0',dateArr)function isNull(object) {if (object == null || typeof object == "undefined") {return true;}return false;}// 获取 星期几function getWeek(dateString) {var date;if (isNull(dateString)) {date = new Date();} else {var dateArray = dateString.split("-");date = new Date(dateArray[0],parseInt(dateArray[1] - 1),dateArray[2]);}var weeks = new Array("日", "一", "二", "三", "四", "五", "六");return "星期" + weeks[date.getDay()];// return "星期" + "日一二三四五六".charAt(date.getDay);}let arr = [];dateArr.forEach((it) => {arr.push(getWeek(it));});this.weekArr = arr.slice(10*(this.x+1)*-1,arr.length);console.log("2.3", arr.slice(10*(this.x+1)*-1,arr.length));}},// 渲染Rendering() {this.timeList.forEach((item) => {this.date.forEach((v) => {let obj = { date: v, time: item };this.rili.push(obj);});});// console.log(19, this.rili);},// 点击选择selectcalendar(ite) {if(this.seleArr.findIndex(item => item===ite)>-1){return}this.seleArr.push(ite)this.$message('选中'+ite.date+'--'+ite.time);this.$emit('selectcalendar',ite)console.log('时间数组',this.seleArr)},nextFn(){this.x+=1if(this.x===-1){this.x=1}this.seleArr=[]this.rili=[]this.weekArr=[]if(this.x>0){this.getDate()}if (this.x<0){this.backDate()}this.Rendering()},backFn(){this.x-=1if(this.x===0){this.x=-2}this.seleArr=[]this.rili=[]this.weekArr=[]if(this.x>0){this.getDate()}if (this.x<0){this.backDate()}this.Rendering()}},
};
</script><style lang="scss" scoped>
.containes{padding: 20px 0 !important;
}
.header {display: flex;align-items: center;height: 10%;border: 1px solid #EEEEEE ;padding: 20px;.headerleft {width: 40%;height: 100%;display: flex;align-items: center;.tybox {display: flex;align-items: center;font-size: 16px;height: 30px;margin-left: 15px;// width:100px;.selecttype {height: 16px;width: 30px;// background-color: skyblue;}.text {margin-left: 10px;}}}.headerright {display: flex;}
}
.calendar {display: grid;grid-template-columns: 1fr 9fr;height: 90%;.calendarleft {height: 100%;.ctop {height: 10%;border: 1px solid #EEEEEE ;}.cbottom {height: 90%;display: grid;justify-items: stretch;grid-template-rows: repeat(17, 1fr);.week {display: flex;align-items: center;justify-content: center;border: 1px solid #EEEEEE ;}}}.calendarright {height: 100%;// background-color: red;.crtop {display: grid;grid-template-columns: repeat(10, 1fr);height: 10%;.rdate {display: flex;align-items: center;justify-content: center;height: 100%;border: 1px solid #EEEEEE ;text-align: center;}}.crbottom {height: 90%;display: grid;grid-template: repeat(17, 1fr) / repeat(10, 1fr);.box {border: 1px solid #EEEEEE ;}.selecolor{background-color: #72bbff;}}}
}
</style>

后面有完善再更新（小屏幕电脑可能会有响应式问题后期有时间修复）

vue 会议室日历预约组件相关推荐

vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件
vue关于element日历calendar组件上月.今天.下月.日历块点击事件参考 https://blog.csdn.net/qq493820798/article/details/106858 ...
vue 日历签到组件
vue写好的组件,直接安装npm install vue-checkin --save,github地址 GitHub - hasbug/vue-checkin 或者自己写,如下新建vue-che ...
会议室时间预约前端_号外！会议室预约流程为您贴心上线
号外!号外线上预约,线下服务舜宇仪器会议室线上预约流程为您贴心上线 ☑ 线上预约,更合理安排使用时段 ☑ 足不出户,会议室申请一步到位预约 • 操作指南第一步查看会议室预约情况 ...
vue显示日历插件_一个干净轻巧的插件，用于显示属性日历
vue显示日历插件 V日历 (V-Calendar) V-Calendar is a clean and lightweight plugin for displaying simple, attri ...
vue制作日历_如何使用Vue制作每月日历
vue制作日历 Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For ...
iOS 高可控性日历基础组件 - SKCalendarView 的使用和实现思路的分享
阅读 61 收藏 5 2017-04-02 原文链接:http://www.jianshu.com/p/ce4c64a4d437 SKCalendarView 是一个高可控性的日历基础组件,为了提高应 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...

vue 会议室日历预约组件

vue 会议室日历预约组件相关推荐

最新文章

热门文章