vue自定义日历组件12日历平铺 pc/移动

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

vue pc端12日历记录：

---

效果图：

代码如下：

<template>
  <div id="calendar">
    <div class="choose-head">
      <div class="choose-year">{{ currentYear }} 年工作日历</div>
      <div class="choose-search">
        <el-input
          class="choose-input"
          v-model.trim="currentYear"
          placeholder=""
        >
          {{ currentYear }}</el-input
        >
        <el-button @click="handleChangePickPre(currentYear)">&lt;</el-button>
        <el-button @click="handleChangePickNext(currentYear)">&gt;</el-button>
      </div>
    </div>
    <div
      v-for="item in calendarDataList"
      :key="item.month"
      class="calendarList"
    >
      <div class="title-month">{{ item.month }}</div>
      <!-- 星期 -->
      <ul class="weekdays">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
      </ul>
      <!-- 日期 -->
      <ul class="days">
      	//主要代码
        <li v-for="item1 in item.xq" :key="item.month + '-day' + item1"></li>
        <li v-for="item1 in item.day" :key="item.month + '-' + item1">
          <span
            v-if="currentYear + '-' + item.months + '-' + item1 == vacation"
            @click="handleChangeTime(1)"
            class="active"
            >{{ item1 }}</span
          >
          <span v-else @click="handleChangeTime(2)">{{ item1 }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "vacationApply",
  data() {
    return {
      currentYear: new Date().getFullYear(), //年
      typeColour: "", //
      dayChecked: "",
      calendar: [
        {
          telit: "2022-4-7",
        },
        {
          telit: "2022-7-9",
        },
      ],
      vacation: "",
      calendarDataList: [
        {
          month: "一月",
          months: 1,
          day: 0,
          xq: 0,
        },
        {
          month: "二月",
          months: 2,
          day: 0,
          xq: 0,
        },
        {
          month: "三月",
          months: 3,
          day: 0,
          xq: 0,
        },
        {
          month: "四月",
          months: 4,
          day: 0,
          xq: 0,
        },
        {
          month: "五月",
          months: 5,
          day: 0,
          xq: 0,
        },
        {
          month: "六月",
          months: 6,
          day: 0,
          xq: 0,
        },
        {
          month: "七月",
          months: 7,
          day: 0,
          xq: 0,
        },
        {
          month: "八月",
          months: 8,
          day: 0,
          xq: 0,
        },
        {
          month: "九月",
          months: 9,
          day: 0,
          xq: 0,
        },
        {
          month: "十月",
          months: 10,
          day: 0,
          xq: 0,
        },
        {
          month: "十一月",
          months: 11,
          day: 0,
          xq: 0,
        },
        {
          month: "十二月",
          months: 12,
          day: 0,
          xq: 0,
        },
      ],
    };
  },
  created: function () {
    this.handleChangeInitData();
    this.getCurrentDay();
  },
  methods: {
    getCurrentDay() {
      for (let item of this.calendar) {
        this.vacation = item.telit;
      }
    },

    getCurrentDayCalendar(year) {
      for (let i = 0; i < this.calendarDataList.length; i++) {
        // 获取每月天数
        let thisDate = new Date(year, this.calendarDataList[i].months, 0);
        this.calendarDataList[i].day = thisDate.getDate(); //获取天数
        // 获取前月的第一天是星期几，空几格
        let date = new Date(year, this.calendarDataList[i].months - 1, 1);
        this.calendarDataList[i].xq = date.getDay();
      }
    },

    // js获取每个月有多少天
    handleChangeInitData: function (year) {
      if (year != undefined) {
        this.currentYear = year;
        this.getCurrentDayCalendar(year);
      } else {
        let date = new Date();
        let year = date.getFullYear();
        this.getCurrentDayCalendar(year);
      }
    },
    // 点击年
    handleChangePickPre: function (year) {
      year--;
      this.currentYear = year;
      this.handleChangeInitData(year);
    },
    handleChangePickNext: function (year) {
      year++;
      this.currentYear = year;
      this.handleChangeInitData(year);
    },
    // 点击事件
    handleChangeTime(type) {
      let title = "";
      if (type == 1) {
        title = "您确定将假期改成工作日吗？";
      } else {
        title = "您确定将工作日改成假期吗？";
      }
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          if (type == 1) {
            this.typeColour == 1;
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
#calendar {
  font-size: 12px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 20px;
}
.title-month {
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  background-color: #000080;
}
.calendarList {
  width: 24%;
}
.choose-head {
  width: 100%;
  padding: 20px;
  background-color: #f0f0f0;
}
.choose-year {
  text-align: center;
  font-size: 25px;
}
.choose-search {
  display: flex;
  flex-flow: flex-end;
  justify-content: end;
}
.choose-input {
  width: 100px !important;
}
.month {
  width: 100%;
  color: #333333;
}
.month ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  height: 35px;
}
.year-month {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}
.choose-month {
  text-align: center;
  font-size: 12px;
}
.arrow {
  padding: 15px;
  color: #999999;
}

.month ul li {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.weekdays {
  margin: 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  color: #999;
  justify-content: space-around;
}
.weekdays li {
  display: inline-block;
  width: 13.6%;
  text-align: center;
}
.days {
  padding: 10px;
  background: #ffffff;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.days li {
  calendardatalist-style-type: none;
  display: inline-block;
  width: 14.2%;
  text-align: center;
  padding-bottom: 4px;
  padding-top: 10px;
  font-size: 12px;
  color: #000;
}
.days li .active {
  padding: 6px 6px;
  background: green;
  color: #fff;
}
.days li .other-month {
  padding: 5px;
  color: gainsboro;
}
.days li:hover > span > span {
  padding: 6px 6px;
  background: #e1e1e1;
  color: #fff;
}
</style>

总结

提示：这里对文章进行总结：

原文地址：https://www.jb51.cc/wenti/3284097.html