Sample code using the element calendar component in Vue

First look at the effect diagram:

insert image description here

The complete code is attached

<template>
  <div class="newSeeds" id="famerCalendar">
    <div class="title-bottom">
      <el-date-picker
        :clearable="false"
        prefix-icon="timeFilter"
        v-model="value2"
        type="month"
        placeholder="Select month"
        value-format="yyyy-MM"
        @change="changeDate"
      >
      </el-date-picker>
    </div>
    <div class="calendarBody">
      <el-calendar v-model="value">
        <template slot="dateCell" slot-scope="{ date, data }">
          <div
            @click="chooseDay(data)"
            class="cellInfo"
            :class="data.isSelected == true ? 'shadowBox' : ''"
          >
            <ul class="cellInfoUl">
              <li v-for="(item, index) in activeList" :key="index">
                <p v-if="data.day == item.time" class="cellInfoUlP">
                  {{ item.name }}
                </p>
              </li>
            </ul>
            <div
              v-for="(val, keys, i) in reverseMessage"
              :key="i"
              :class="data.day == keys ? 'tipMsg' : ''"
            >
              <span v-if="data.day == keys" class="tipMsged">{{ val }}</span>
            </div>
            <div class="cellInfoBox">
              <p>{{ data.day.split("-")[2] }}</p>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <!-- Drawer -->
    <el-drawer
      :title="timeChoose"
      :visible.sync="drawer"
      :direction="direction"
    >
      <div class="modeEach" v-if="listNormal[0]">
        <div class="modeEachs" v-for="(item, index) in listNormal" :key="index">
          <i class="setI el-icon-delete" @click="delTips(item)"></i>
          <i
            class="setI setIs el-icon-edit-outline"
            @click="addTips(1, item)"
          ></i>
          <p>
            <span>Start time:</span> <span>{{ item.time }}</span>
          </p>
          <p>
            <span>Farming activity name:</span> <span>{{ item.name }}</span>
          </p>
          <p>
            <span>Responsible Person:</span> <span>{{ item.userName }}</span>
          </p>
          <p>
            <span>Number of participants:</span> <span>{{ item.people }}</span>
          </p>
          <p>
            <span>Target Specification:</span> <span>{{ item.content }}</span>
          </p>
        </div>
      </div>
      <div class="modeEach modeEached" v-else>
        <div class="emptyState">
          <img src="../../../assets/leftScreen/math17.png" alt="" />
        </div>
        <p>There are no agricultural activities scheduled for the current date.</p>
        <p>Click the "Add Farming Activity" button in the lower right corner to add it! </p>
      </div>
      <div class="footBox">
        <el-button type="primary" @click="addTips(0)">Add agricultural activities</el-button>
      </div>
    </el-drawer>
    <!-- New modifications -->
    <el-dialog
      title=""
      :visible.sync="updateForm"
      width="31vw"
      class="addAlameBox"
    >
      <div slot="title" class="header-title" style="position: relative">
        <span class="title-name"></span>
        <span class="title-age">{{ boxPrompt }}</span>
        <span
          style="
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0px;
            font-size: 2.22vh;
          "
        >
        </span>
      </div>
      <div class="addAlaForm">
        <el-form
          ref="upTableData"
          :rules="rules"
          :model="upTableData"
          label-width="10vw"
        >
          <!-- <el-form-item label="Start time" prop="time">
            <div class="block">
              <el-date-picker
                v-model="upTableData.time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="Select date and time"
              >
              </el-date-picker>
            </div>
          </el-form-item> -->
          <el-form-item label="Farming activity name" prop="name">
            <el-input v-model="upTableData.name"></el-input>
          </el-form-item>
          <el-form-item label="Person in charge" prop="userName">
            <el-input v-model="upTableData.userName"></el-input>
          </el-form-item>
          <el-form-item label="Number of participants" prop="people">
            <el-input v-model="upTableData.people"></el-input>
          </el-form-item>
          <el-form-item label="Target Specification" prop="content">
            <el-input v-model="upTableData.content"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button
              class="saveBtn"
              type="primary"
              @click="saveForm('upTableData')"
              >Save</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dateFormat from "../../../components/dealTime.js";
export default {
  data() {
    return {
      timeChoose: "7-26",
      sixs: [],
      num: 0,
      activeday: 0,
      timeRex: "",
      listParams: {
        page: 1,
        size: "",
        where: "",
        time: "",
      },
      ids: 0,
      listNormal: [],
      activeList: [
        {
          data1: "2021/08/17 15:30",
          data2: "1# plot watering",
          data3: "Sun Guodong",
          data4: "16",
          data5: "Soil moisture reaches 40%",
        },
        {
          data1: "2021/08/17 15:30",
          data2: "1# plot watering",
          data3: "Sun Guodong",
          data4: "16",
          data5: "Soil moisture reaches 40%",
        },
      ],
      updateForm: false,
      boxPrompt: "New",
      upTableData: {
        id: 0,
        name: "", //Operation name time: "", //Planned time userName: "", //Person in charge people: "", //Number of people content: "", //Content},
      rules:
        data1: [
          { required: true, message: "time", trigger: ["blur", "change"] },
        ],
        data2: [
          {
            required: true,
            message: "Product name cannot be empty",
            trigger: ["blur", "change"],
          },
        ],
        data3: {
          required: true,
          message: "Product type cannot be empty",
          trigger: ["blur", "change"],
        },
        data4: {
          required: true,
          message: "Specification cannot be empty",
          trigger: ["blur", "change"],
        },
        data5: {
          required: true,
          message: "The delivery quantity cannot be empty",
          trigger: ["blur", "change"],
        },
      },
      // drawer: false,
      direction: "rtl",
      // Date value2: "",
      value: new Date(),
      loading: false,
      logisticsForm: {
        name: "",
        region: -1,
      },
    };
  },

  mounted() {
    this.requrstLists();
    this.getNowDate();
    // this.getActivityCalendar;
  },
  watch:
    activeList(newVal) {
      this.activeList = newVal;
    },
  },
  computed: {
    reverseMessage() {
      var arrs = [];
      var countArrs = [];
      this.activeList.forEach((val) => {
        arrs.push(val.time);
      });
      return arrs.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        countArrs.push({ prev });
        return prev;
      }, {});
      // };
    },
  },
  methods: {
    // Get the current time getNowDate(){
      var date = new Date();
      this.value2 = dateFormat('YYYY-mm',date)
    },
    // Get the list interface async requrstLists() {
      const {
        data: { datas },
      } = await this.$post("product/getProductPlayList", {
        page: 1,
        size: "",
        where: "",
        time: "",
      });
      datas.forEach((val) => {
        if (val.time.indexOf(":")) {
          console.log("space found");
          val.time = val.time.split(" ")[0];
        }
      });
      this.activeList = datas;
      // this.sortArr()
    },
    async requestList() {
      const {
        data: { datas },
      } = await this.$post("product/getProductPlayList", this.listParams);
      this.listNormal = datas;
    },
    // Add addTips(val, item) {
      this.updateForm = true;
      if (val === 0) {
        this.boxPrompt = "New";
        this.upTableData = {
          id: 0,
          name: "", //Operation name time: "", //Planned time userName: "", //Person in charge people: "", //Number of people content: "", //Content};
      } else if (val === 1) {
        this.boxPrompt = "Edit";
        this.ids = item.id;
        this.$nextTick(() => {
          this.upTableData = JSON.parse(JSON.stringify(item));
        });
      }
    },
    //Save saveForm() {
      let url = "/product/editProductPlay";
      if (this.boxPrompt == "New") {
        this.upTableData.id = 0;
      } else if (this.boxPrompt == "Edit") {
        this.upTableData.id = this.ids;
      }
      this.upTableData.time = this.timeChoose + "00:00:00";
      this.$refs["upTableData"].validate((valid) => {
        if (valid) {
          this.$get(url, this.upTableData).then((res) => {
            this.updateForm = false;
            if (res.data.state == "success") {
              this.requrstList();
              this.requrstLists();
              this.$message.success("Operation successful");
            } else {
              this.$message.error("Operation failed! Please try again later!");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    chooseDay(data) {
      this.$nextTick(() => {
        if (data.type === "current-month") {
          this.drawer = true;
          this.listParams.time = data.day;
          this.timeChoose = data.day;
          this.requrstList();
        } else if (data.type === "prev-month") {
          this.prevBtn.click();
        } else if (data.type === "next-month") {
          this.nextBtn.click();
        }
      });
    },

    // Drawer handleClose(done) {
      this.$confirm("Confirm to close?")
        .then((res) => {
          done();
          this.requrstLists();
        })
        .catch((err) => {});
    },
    // Delete delTips(val) {
      console.log(val);
      this.$confirm("This operation will permanently delete the file, do you want to continue?", "Prompt", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(() => {
          this.$post("/product/deteleProductPlay", { id: val.id }).then(
            (res) => {
              if (res.data.state == "success") {
                this.$message.success("Deleted successfully");
                this.requrstList();
                this.requrstLists();
              } else {
                this.$message(res.data.msg);
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "Deleted",
          });
        });
    },

    //Time selection changeDate(val) {
      this.value = val;
    },
    //Refresh refresh() {
      this.loading = true;
      // this.requrstList();
    },
    //Searchsearch() {
      let name = this.logisticsForm.name;
      let level = this.logisticsForm.region;
      if (level == -1) level = "";
      this.loading = true;
      // this.requrstList(name, level);
    },
    //Reset removeForm() {
      this.logisticsForm.name = "";
      this.logisticsForm.region = -1;
      // this.requrstList();
    },
  },
};
</script>

<style scoped lang="less">
@import "../../../style/backTable.less";
</style>
  <style scoped lang="less">
#famerCalendar /deep/ .el-calendar-table {
  width: 100%;
  height: 100%;
  &:not(.is-range) {
    // Make dates that are not this month unclickable and will not jump to other months td.next {
      pointer-events: none;
    }
    td.prev {
      pointer-events: none;
    }
  }
}

.calendarBody {
  width: 100%;
  height: 81vh;
}
#famerCalendar .newSeeds {
  height: 90vh;
}
#famerCalendar /deep/ .el-calendar__header {
  justify-content: space-between;
  padding: 12px 20px;
  border: none;
  text-align: center;
  background: #00284d;
  display: block;
}
#famerCalendar /deep/ .el-button-group {
  display: none;
}
#famerCalendar /deep/ .el-calendar__title {
  color: #fff;
  align-self: center;
  line-height: 3vh;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n) {
  background: #5c768d;
  color: #fff;
  padding: 1vh 0;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n + 1) {
  background: #335371;
  color: #fff;
  padding: 1vh 0;
}
#famerCalendar /deep/ .el-calendar__body {
  padding: 0;
}
#famerCalendar .title-bottom /deep/ .el-input--prefix .el-input__inner {
  padding-left: 3vw;
  width: 75%;
  /* height: 4vh;
    line-height: 4vh; */
}
#famerCalendar /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 10vw;
}
#famerCalendar .timeFilter {
  position: relative;
}
#famerCalendar /deep/ .el-calendar-table td {
  text-align: right;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  // padding: 1vh;
  padding: 0;
  height: 11.5vh;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day > p {
  box-sizing: border-box;
  padding: 1vh;
}
#famerCalendar /deep/ .timeFilter:after {
  min-width: 2vw;
  white-space: nowrap;
  content: "date";
  border-right: 1px solid #c0c4cc;
  padding: 0 0.2vw;
  box-sizing: border-box;
  /* line-height: 4vh; */
}
#famerCalendar /deep/ .el-drawer__open .el-drawer.rtl:focus-visible {
  border: none;
}
#famerCalendar /deep/ .el-drawer__header:focus-visible {
  border: none;
}
.cellInfoUl {
  width: 80%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
.cellInfoUl::-webkit-scrollbar {
  display: none;
}
.cellInfo {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1vh;
  box-sizing: border-box;
}
.tipMsg {
  position: absolute;
  display: flex;
  right: 0vh;
  bottom: 0vh;
  width: 2vw;
  height: 2vw;
  color: #fff;
}
.tipMsged {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-10%, -20%);
}
.tipMsg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0px;
  width: 0px;
  border-top: solid 2vw transparent;
  border-left: solid 2vw #3999e6;
  transform: rotateZ(-90deg);
}
.cellInfoUl li {
  width: 100%;
  line-height: 2.5vh;
  color: #fff;
  background: #61adeb;
  margin-bottom: 1vh;
  padding: 0 0.5vw;
  box-sizing: border-box;
  border-radius: 16px;
  text-align: center;
}
.cellInfoBox {
  text-align: center;
  /* color: #; */
}
.modeEach {
  width: 100%;
  padding: 2vh 1vw;
  box-sizing: border-box;
  height: 78vh;
  overflow: hidden;
  overflow-y: scroll;
}
.modeEach::-webkit-scrollbar {
  display: none;
}
.footBox {
  width: 100%;
  padding: 2vh 1vw;
  box-sizing: border-box;
}
.modeEachs {
  width: 100%;
  min-height: 18vh;
  background: #3999e6;
  border-radius: 6px;
  padding: 2vh 1vw;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 1vh;
}
.setI {
  position: absolute;
  top: 1vh;
  right: 0.5vw;
  background: #fff;
  width: 2.5vh;
  height: 2.5vh;
  border-radius: 50%;
  text-align: center;
  line-height: 2.5vh;
  color: red;
}
.setIs {
  top: 1vh;
  right: 2vw;
  color: #3999e6;
}
.modeEachs span {
  font-size: 1.3vh;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 2.78vh;
}
.modeEachs span:nth-of-type(1) {
  min-width: 3vw;
  display: inline-block;
}
.footBox {
  text-align: right;
}
.emptyState {
  width: 100%;
  height: 60%;
  text-align: center;
}
.emptyState img {
  width: 80%;
  min-height: 100%;
}
.modeEached {
  text-align: center;
}
.modeEached p {
  font-size: 1.67vh;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  line-height: 2.78vh;
}
.shadowBox {
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.15);
  padding: 1vh;
  box-sizing: border-box;
}
</style>

This is the end of this article about the sample code of the calendar component using element in vue. For more relevant vue element calendar component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue implements calendar component
Vue implements vertical infinite sliding calendar component
Encapsulation method of Vue calendar component
Write a vue calendar component from scratch
Vue custom optional time calendar component
Improved calendar component based on Vue2-Calendar (including Chinese instructions)
Vue implements a cool calendar component
VUE implements calendar component function
Vue version of handwritten calendar component

<<: MySQL quick recovery solution based on time point

>>: Analysis of 2 implementation methods of configuring jnid data source in Tomcatc3p0