效果图如下
使用elementUI的Calendar日历组件
组件本身是这个样子
要在每个日期格子里加上 班/休
去掉点击事件和 上个月|今天|下个月 的切换
数据格式是这样的
分上段和下段
let scheduling = [{staffname: "张三",arrangeHalf: "上午",arrangeStatus: ["班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班"]}, {staffname:"张三",arrangeHalf: "下午",arrangeStatus: ["班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班"]}]
可以获取当前日期作为默认时间范围
getDate () {const date = new Date()const nowMonth = date.getMonth() + 1const year = String(date.getFullYear())const day = String(date.getDate()).length === 1 ? '0' + String(date.getDate()) : String(date.getDate())this.searchMonth = String(nowMonth).length === 1 ? year + '-0' + nowMonth + '-' + day : year + '-' + nowMonth + '-' + day}
数据渲染是这样的
<!-- range 是自定义时间范围 --><el-calendar :range="[searchMonth, searchMonth]"><templateslot="dateCell"slot-scope="{data}"><!-- 判断是否为当前月(current-month)，是就展示日期，否则啥也不展示 --><p v-if="data.type == 'current-month'">{{ data.day.split('-').slice(1).join('-') }}</p><!-- 先判断是否为当前月，且数据是否为空 --><div class="arrangeWork" v-if="data.type == 'current-month' && scheduling.length > 0"><!-- 遍历数据，判断当前日期的日是否与数据中的（index+1）相等，也就是说判断是否为当天排班 --><div v-for="(item, index) in scheduling[0].arrangeStatus" :key="'1' + index">{{data.day.split('-')[2] == index+1 ? '上段： ' + item : ''}}</div><div v-for="(item, index) in scheduling[1].arrangeStatus" :key="'2' + index">{{data.day.split('-')[2] == index+1 ? '下段： ' + item : ''}}</div></div></template></el-calendar>
处理点击事件
这里涉及到两个知识点
>>>深度作用选择器
在vue中，为了防止父组件样式影响子组件，同常会在style中加<style scoped>，当需要修改子组件的样式又不影响其他元素时可以使用>>>
/* 一般前面的类名会选当前页面最大父元素的类名，>>>后面跟要修改的类名就可以了 */.block-bg >>> .el-calendar-table:not(.is-range) td.prev {pointer-events: none;}
如果是less/sass，可能无法识别，这时可以用/deep/
.block-bg {/deep/ .el-calendar-table:not(.is-range) td.prev {pointer-events: none;}}
pointer-events属性
pointer-events CSS样式
css属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
pointer-events: none;
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
简言之，在这里，可以去掉点击事件
去掉 右上角 的切换
/* 简单粗暴 直接找到这个元素 给它隐藏就行了 */.block-bg >>> .el-calendar__button-group .el-button-group {display: none;}
记录简单的小功能
不喜勿喷！！！
不喜勿喷！！！
不喜勿喷！！！
