ElementUI:定制日历Calendar

ElementUI虽好,可是日历不大好QAQ 是😭So,需要我们自己定制一个日历

思路:

首先是这是日历的显示样式,通过对表单、头部、每一个单元格的设置,设置出自己需要的样式;第二步是修改每个日期块的显示内容,elementUI已经为我们预留了插槽显示的方案,我们只需要按照自己的需求定制亦可以了;最后一步是隐藏掉原生的按钮,加上自己的按钮绑定事件就可以了。

效果:

在这里插入图片描述

跟原生的一比,还是挺好看的

过程:

1. 修改日历样式(SCSS)

① 头部背景色、头部标题字体颜色按需修改

::v-deep .el-calendar__header {
	// 修改头部背景颜色
	background-color: #57617C;
	padding: 3px 5px;
	border: none;
	display: flex;
	justify-content: center;

	.el-calendar__title {
		// 修改头部标题的字体颜色
		color: white !important;
		font-size: 18px;
		font-weight: bolder;
	}
}

② 主题padding清零

::v-deep .el-calendar__body {
  // 修改主题部分
  padding: 0;
}

③ 头部星期padding清零、背景色修改、字体颜色修改;每个日期块样式修改、选中样式修改

::v-deep .el-calendar-table {
  thead {
    th {
      // 修改头部星期部分
      padding: 0;
      background-color: #57617C;
      color: white;
    }
  }

  .is-selected {
    .el-calendar-day {
      p {
        // 选中日期颜色
        color: white;
      }
    }
  }

  .el-calendar-day {
    // 每天小块样式设置
    padding: 0;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      // 所有日期颜色
      color: black;
      z-index: 1;
    }
  }
}

④ 非本月字体颜色修改、周末背景颜色修改

::v-deep .el-calendar-table__row {
  .prev, .next {
    // 修改非本月
    .el-calendar-day {
      p {
        color: #f0d9d5;
      }
    }
  }

  td {
    // 修改每一个日期td标签
    &:first-child, &:last-child {
      background-color: #f5f5f5;
    }
  }
}

⑤ 按钮样式

button {
  padding: 3px 10px;
}

2. 通过插槽修改日历显示

官方文档给的插槽解释是两个,一个日期,一个对象。
在这里插入图片描述
而我们通过函数将其打印出来,他们两个是什么一目了然。
在这里插入图片描述在这里插入图片描述
可以看到,date就是不同日期Date()实例,data则对应每一个日期块对象。其中包括是否选择,之前一个月/当前月份/下一个月份判断以及日期。
我们给选择的日期,加一个div,设置其border-radius,给其加一个背景圆圈。
在这里插入图片描述
在这里插入图片描述

同时,时间只保留日,其余的删掉。
在这里插入图片描述

3. 修改按钮

① 隐藏掉原生按钮

::v-deep .el-calendar__header {
  .el-calendar__button-group {
    // 隐藏原生按钮
    display: none;
  }
}

② 加上自己的按钮

在这里插入图片描述

③ 绑定事件

因为日历的时间是和value双向绑定的,所以我们只需要更改value就可以了。
在这里插入图片描述

完整组件代码

<template>
  <div id="customizedCalendar">
    <el-calendar
        :first-day-of-week=7
        v-model="value">
      <template
          slot="dateCell"
          slot-scope="{date, data}">
        <div slot="reference" class="div-Calendar" @click="clickCalendar(data)" style="position: relative;z-index: 10">
          <p>{{ data.day.split('-').slice(2).join('-') }}</p>
        </div>
        <div v-if="data.isSelected" id="selectP"></div>
      </template>
    </el-calendar>
    <div id="button">
      <el-button @click="skip('preYear')" type="primary" round size="mini"><i class="el-icon-arrow-left"></i></el-button>
      <el-button @click="skip('preMonth')" type="warning" round size="mini"><i class="el-icon-arrow-left"></i></el-button>
      <el-button @click="skip('preDay')" type="success" round size="mini"><i class="el-icon-arrow-left"></i></el-button>
      <el-button @click="skip('today')" type="info" round size="mini">今天</el-button>
      <el-button @click="skip('postDay')" type="success" round size="mini"><i class="el-icon-arrow-right"></i>
      </el-button>
      <el-button @click="skip('postMonth')" type="warning" round size="mini"><i class="el-icon-arrow-right"></i>
      </el-button>
      <el-button @click="skip('postYear')" type="primary" round size="mini"><i class="el-icon-arrow-right"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import PubSub from 'pubsub-js'

export default {
  name: "Calendar",
  data() {
    return {
      value: new Date()
    }
  },
  computed: {
    selectDate() {
      return moment(this.value).format("YYYY-MM-DD");
    }
  },
  methods: {
    skip(flag) {
      if (flag === 'preYear') this.value = new Date(this.value.setFullYear(this.value.getFullYear() - 1));
      else if (flag === 'preMonth') this.value = new Date(this.value.setMonth(this.value.getMonth() - 1));
      else if (flag === 'preDay') this.value = new Date(this.value.setDate(this.value.getDate() - 1));
      else if (flag === 'today') this.value = new Date();
      else if (flag === 'postDay') this.value = new Date(this.value.setDate(this.value.getDate() + 1));
      else if (flag === 'postMonth') this.value = new Date(this.value.setMonth(this.value.getMonth() + 1));
      else if (flag === 'postYear') this.value = new Date(this.value.setFullYear(this.value.getFullYear() + 1));
    },
    clickCalendar(data) {
      console.log(data)
      PubSub.publish("uploadWarningResultWarningTime", data.day);
    }
  }
}
</script>

<style lang="scss" scoped>
#customizedCalendar {
  width: 100%;
  height: 100%;

  #button {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #selectP {
    width: 30px;
    height: 30px;
    background-color: #15ff2c;
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
  }

  ::v-deep .el-calendar__header {
    // 修改头部背景颜色
    background-color: #57617C;
    padding: 3px 5px;
    border: none;
    display: flex;
    justify-content: center;

    .el-calendar__button-group {
      // 隐藏原生按钮
      display: none;
    }

    .el-calendar__title {
      // 修改头部标题的字体颜色
      color: white !important;
      font-size: 18px;
      font-weight: bolder;
    }
  }

  ::v-deep .el-calendar__body {
    // 修改主题部分
    padding: 0;
  }

  ::v-deep .el-calendar-table {
    thead {
      th {
        // 修改头部星期部分
        padding: 0;
        background-color: #57617C;
        color: white;
      }
    }

    .is-selected {
      .el-calendar-day {
        p {
          // 选中日期颜色
          color: black;
        }
      }
    }

    .el-calendar-day {
      // 每天小块样式设置
      padding: 0;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        // 所有日期颜色
        color: black;
        z-index: 1;
        user-select: none;
        display: flex;
      }
    }
  }

  ::v-deep .el-calendar-table__row {
    .prev, .next {
      // 修改非本月
      .el-calendar-day {
        p {
          color: #f0d9d5;
        }
      }
    }

    td {
      // 修改每一个日期td标签
      &:first-child, &:last-child {
        background-color: #f5f5f5;
      }
    }
  }

  button {
    padding: 3px 10px;
  }
}

</style>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页