Sample code using the element calendar component in Vue
|
First look at the effect diagram:
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:
|
<<: MySQL quick recovery solution based on time point
>>: Analysis of 2 implementation methods of configuring jnid data source in Tomcatc3p0
Recommend
Two ways to connect WeChat mini program to Tencent Maps
I've been writing a WeChat applet recently an...
Detailed explanation of the pitfalls of DTS caused by the timestamp and datetime time zone issues in MySQL
Table of contents How to represent the current ti...
Two common solutions to html text overflow display ellipsis characters
Method 1: Use CSS overflow omission to solve The ...
A brief introduction to MySQL functions
Table of contents 1. Mathematical functions 2. St...
Analysis of the operating principle and implementation process of Docker Hub
Similar to the code hosting service provided by G...
How to modify the time in centos virtual machine
The one above shows the system time, and the one ...
A brief discussion on how to elegantly delete large tables in MySQL
Table of contents 1. Truncate operation 1.1 What ...
Six tips to increase web page loading speed
Secondly, the ranking of keywords is also related ...
Solution to occasional crash of positioning background service on Linux
Problem Description In the recent background serv...
Install Docker on Linux (very simple installation method)
I have been quite free recently. I have been doin...
JS implementation of carousel carousel case
This article example shares the specific code of ...
JavaScript to achieve the idea of snake game
The implementation idea of the javascript game ...
Installation tutorial of MySQL 5.1 and 5.7 under Linux
The operating system for the following content is...
Some suggestions on Vue code readability
Table of contents 1. Make good use of components ...
Analysis of pitfalls in rounding operation of ROUND function in MySQL
This article uses examples to illustrate the pitf...