ElementUI + Calendar日历组件

效果图如下
使用elementUI的Calendar日历组件
组件本身是这个样子
要在每个日期格子里加上 班/休
去掉点击事件和 上个月|今天|下个月 的切换

• 数据格式是这样的
  分上段和下段

let scheduling = [{
	staffname: "张三",
	arrangeHalf: "上午",
	arrangeStatus: ["班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班"]
	}, {
	staffname:"张三",
	arrangeHalf: "下午",
	arrangeStatus: ["班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班","班"]
}]

可以获取当前日期作为默认时间范围

getDate () {
  const date = new Date()
  const nowMonth = date.getMonth() + 1
  const 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]">
  <template
    slot="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;
}

---

记录简单的小功能
不喜勿喷！！！
不喜勿喷！！！
不喜勿喷！！！