<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="年份" prop="holidayYear">
        <el-date-picker
          v-model="queryParams.holidayYear"
          type="year"
          :clearable="false"
          placeholder="選擇年"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="primary" @click="submitClickedDates">提交</el-button>

      <div v-for="(cal, index) in defaultCals" :key="index">
        <el-col :span="6">
          <el-calendar :value="cal" class="holiday">
            <template slot="dateCell" slot-scope="{ date, data }">
              <div
                class="holiday-cell"
                v-show="data.type === 'current-month'"
                :id="cal.getMonth() + '-' + data.day"
                @click="selectCalendarDate(cal, data)"
                :style="{ backgroundColor: getCellBackgroundColor(cal, data) }"
              >
                {{ data.day.split("-")[2] }}
              </div>
            </template>
          </el-calendar>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  // name: "temp",
  data() {
    return {
      queryParams: {
        holidayYear: new Date(),
      },
      //設(shè)置的月份
      defaultCals: [],
      // 全年已選中的日期
      holidayDate: [],
      clickedDates: [], // 記錄點(diǎn)擊的日期
      selectedDates: [], // 初始選中的日期數(shù)組
    };
  },
  created() {
    //初始化日歷
    let nowYear = new Date().getFullYear();
    this.initCalendar(nowYear + 1);

    // 初始化日歷
    // let nowYear = new Date().getFullYear();
    // this.currentMonth = new Date(); // 明確初始化this.currentMonth
    // this.initCalendar(nowYear + 1);
  },
  methods: {
    // 根據(jù)給定的年份獲取一年中周一到周五的日期數(shù)組
    getWeekdays(year) {
      const weekdays = [];
      const currentDate = new Date(year, 0, 1); // 設(shè)置為給定年份的第一天

      // 遍歷一年中的每一天
      while (currentDate.getFullYear() === year) {
        const dayOfWeek = currentDate.getDay();

        // 如果是周一到周五，將日期格式化并添加到數(shù)組中
        if (dayOfWeek >= 1 && dayOfWeek <= 5) {
          const formattedDate = `${currentDate.getFullYear()}-${(
            currentDate.getMonth() + 1
          )
            .toString()
            .padStart(2, "0")}-${currentDate
            .getDate()
            .toString()
            .padStart(2, "0")}`;
          weekdays.push(formattedDate);
        }

        // 將日期增加一天
        currentDate.setDate(currentDate.getDate() + 1);
      }

      return weekdays;
    },
    //初始化日歷
    initCalendar(year) {
      this.defaultCals = [
        new Date(year, 0, 1),
        new Date(year, 1, 1),
        new Date(year, 2, 1),
        new Date(year, 3, 1),
        new Date(year, 4, 1),
        new Date(year, 5, 1),
        new Date(year, 6, 1),
        new Date(year, 7, 1),
        new Date(year, 8, 1),
        new Date(year, 9, 1),
        new Date(year, 10, 1),
        new Date(year, 11, 1),
      ];

      //調(diào)接口獲取
      this.holidayDate = this.getWeekdays(year);
      console.log(this.holidayDate);
      // 轉(zhuǎn)化為對(duì)象數(shù)組
      const formattedDates = this.holidayDate.map((date) => {
        const dateObj = new Date(date);
        return {
          cal: dateObj,
          data: {
            day: date,
            isSelected: false,
            type: "current-month",
          },
        };
      });
      console.log(formattedDates);
      console.log("chushihua");
      this.clickedDates = formattedDates;

      this.$nextTick(() => {
        let holidayCell = document.getElementsByClassName("holiday-cell");
        for (let i in holidayCell) {
          if (undefined != holidayCell[i].style) {
            holidayCell[i].style.backgroundColor = "#FFFFFF";
          }
        }
        //給已選中的日期加背景色
        for (let i in this.holidayDate) {
          const month = parseInt(this.holidayDate[i].split("-")[1]) - 1;
          let span = document.getElementById(month + "-" + this.holidayDate[i]);
          span.style.backgroundColor = "#F56C6C";
        }
      });
    },
    /** 搜索按鈕操作 */
    handleQuery() {
      let year = this.queryParams.holidayYear.getFullYear();
      this.initCalendar(year);
    },
    /** 重置按鈕操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.holidayYear = new Date();
      this.handleQuery();
    },

    // 獲取日期單元格的背景顏色
    getCellBackgroundColor(cal, data) {
      console.log("獲取日期單元格的背景顏色");
      const clickedDate = this.clickedDates.find((clickedDate) => {
        return (
          clickedDate.cal.getFullYear() === cal.getFullYear() &&
          clickedDate.cal.getMonth() === cal.getMonth() &&
          clickedDate.data.day === data.day
        );
      });

      return clickedDate ? "#F56C6C" : "#FFFFFF";
    },

    // 點(diǎn)擊日期單元格的事件
    selectCalendarDate(cal, data) {
      const clickedDateIndex = this.clickedDates.findIndex((clickedDate) => {
        console.log(clickedDate);

        return (
          clickedDate.cal.getFullYear() === cal.getFullYear() &&
          clickedDate.cal.getMonth() === cal.getMonth() &&
          clickedDate.data.day === data.day
        );
      });
      if (clickedDateIndex !== -1) {
        // 如果日期已經(jīng)被點(diǎn)擊過，移除記錄并取消背景色
        this.clickedDates.splice(clickedDateIndex, 1);
      } else {
        // 否則，記錄點(diǎn)擊的日期
        this.clickedDates.push({ cal, data });
      }
      console.log(this.clickedDates);
    },
    // 提交按鈕點(diǎn)擊事件
    submitClickedDates() {
      const formattedDates = this.clickedDates.map((clickedDate) => {
        const date = clickedDate.data.day;
        const formattedDate = `${clickedDate.cal.getFullYear()}-${
          date.split("-")[1]
        }-${date.split("-")[2]}`;
        return formattedDate;
      });

      // 在這里處理格式化后的日期數(shù)組
      console.log("Formatted Dates:", formattedDates);

      // let dates = ['2025-01-01', '2025-01-06', '2025-01-07', '2025-01-08', '2025-01-10'];

      // 將日期字符串轉(zhuǎn)換為 Date 對(duì)象
      // let dateObjects = dates.map(dateString => new Date(dateString));

      // // 按照 Date 對(duì)象進(jìn)行排序
      // dateObjects.sort((a, b) => a - b);

      // // 將排序后的 Date 對(duì)象轉(zhuǎn)換回日期字符串
      // let sortedDates = dateObjects.map(date => date.toISOString().split('T')[0]);

      // console.log(sortedDates);
    },
  },
};
</script>

<style>
.holiday .el-calendar__button-group {
  display: none;
}

.select-month .el-calendar__button-group {
  display: none;
}

.holiday .el-calendar-day {
  padding: 1px;
  width: 100%;
  height: 34px;
}

.select-month .el-calendar-day {
  padding: 1px;
  width: 100%;
}

.holiday-cell {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

文章來源地址http://www.zghlxwxcb.cn/news/detail-804607.html

到了這里，關(guān)于vue+elementui實(shí)現(xiàn)12個(gè)日歷平鋪，初始化工作日，并且可點(diǎn)擊的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！