el-calendar日历的各种样式及事件

效果图

班和休互相修改功能

 

el-calendar  HTML代码段

可以根据自己的需要显示内容，样式

<template>
  <div class="la-container">
    <div class="la-info-main">
      <!-- 关于日历控件 -->
      <el-calendar
        class="lar-el-calendar"
        v-model="value"
        :first-day-of-week="7"
      >
        <template slot="dateCell" slot-scope="{ date, data }">
          <div
            :class="
              calendarData.indexOf(data.day) > -1
                ? 'lar-is-selected'
                : 'lar-no-selected'
            "
            @click="holidayUpdate(data, date)"
          >
            <span
              v-if="
                calendarData.indexOf(data.day) == -1 &&
                queryDate.indexOf(data.day) != -1
              "
              >班</span
            >
            <span
              v-else-if="
                calendarData.indexOf(data.day) > -1 &&
                queryDate.indexOf(data.day) != -1
              "
              style="color: #f73131"
              >休</span
            >
            <span v-else>&nbsp;</span>
            <div
              :style="
                calendarData.indexOf(data.day) > -1
                  ? 'color:#F73131;text-align:center'
                  : 'text-align:center'
              "
            >
              {{ data.day.split("-").slice(1).join("-") }}
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <ladrawer ref="drawer"></ladrawer>
  </div>
</template>

js代码段

el-calendar的上一页，今天，下一页的按钮点击事件在ui库里没有，需要用的话需要在mounted里写监听事件，如下

<script>
import ladrawer from "./components/calendarDialog.vue";
import Api from "@/api";
export default {
  name: "CalendarConfig",
  data() {
    return {
      queryDate: [], //查询的日期
      calendarData: [], //所有假期对应的日期
      value: new Date(),
      year: new Date().getFullYear(),
    };
  },
  components: {
    ladrawer,
  },
  mounted() {
    this.getDayList();
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        this.judgeDate();
      });
      let dayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      dayBtn.addEventListener("click", () => {
        this.judgeDate();
      });
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        this.judgeDate();
      });
    });
  },
  methods: {
    // 获取日期列表
    getDayList() {
      Api.common
        .getDayList({
          year: this.year,
          month: "",
        })
        .then((res) => {
          this.calendarData = [];
          this.queryDate = [];
          res.data.map((item) => {
            let time =
              item.day.toString().slice(0, 4) +
              "-" +
              item.day.toString().slice(4, 6) +
              "-" +
              item.day.toString().slice(6);
            if (item.isWork == 0) {
              this.calendarData.push(time);
            }
            this.queryDate.push(time);
          });
        });
    },
    //节日内容编辑
    holidayUpdate(dataVal, dateVal) {
      this.$refs.drawer.infoscope = {};
      this.$refs.drawer.infoscope = {
        holidayDate: [dataVal.day], // 日期
        years: dataVal.day.substring(0, dataVal.day.indexOf("-")), //获取年份//年份
      };
      this.$refs.drawer.drawer = true;
    },
    // 判断时间
    judgeDate() {
      let d = new Date(this.value);
      if (this.year != d.getFullYear()) {
        this.year = d.getFullYear();
        this.getDayList();
      }
    },
  },
};
</script>

el-calendar css样式

<style lang="scss">
.lar-el-calendar {
  .el-calendar-table td.is-selected {
    background-color: #a2e5a2 !important;
  }
  .el-calendar-table td .el-calendar-day:hover {
    background-color: #a2e5a2 !important;
  }
  .current.is-today {
    background: green;
    color: #fff;
  }
}
</style>

修改类型的弹窗代码

<template>
    <el-dialog :visible.sync="drawer" width="600px"
        append-to-body
        :close-on-click-modal="false"
        title="修改类型"
    >
      <el-form ref="infoscope" :model="infoscope" :rules="rulesinfoscope" label-width="80px">
        <el-form-item label="日期：" prop="holidayDate">
          <el-date-picker
            clearable 
            size="small"
            v-model="infoscope.holidayDate"
            type="dates" 
            value-format="yyyy-MM-dd" 
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="类型：" prop="holidayType">
          <el-select  size="small" v-model="infoscope.holidayType" placeholder="请选择类型" clearable>
            <el-option label="休息日" value="0"></el-option>
            <el-option label="工作日" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="drawer=false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
import Api from "@/api"
export default {
    data(){
        return{
            drawer:false,
            title:'1',
            infoscope:{
              holidayDate:[],
              holidayType:''
            },
            rulesinfoscope:{
              holidayDate: [
                { required: true, message: '请选择时间', trigger: 'change' }
              ],
              holidayType: [
                { required: true, message: '请选择类型', trigger: 'change' }
              ],
            },
        }
    },
    methods:{
        sure(){
          this.$refs.infoscope.validate(val=>{
            if(val){
              let day=this.infoscope.holidayDate.map(item=>{
                return Number(item.replace(/-/g,''))
              })
              Api.common.updateWorkFlag({
                days:day,
                isWorkDay:this.infoscope.holidayType,
              }).then(res=>{
                this.$message.success('修改成功')
                this.drawer=false
                this.$parent.getDayList()
              })
            }else{
              return false
            }
          })
        }
    }
}
</script>

有不懂的可以私信！

有用的留下一个赞👍，谢谢