效果图:
<template>
<div>
<div class="button_title">
<el-button @click="skip('preMonth')" type="warning" round size="large"
><i class="el-icon-arrow-left"></i>上月
</el-button>
<el-button @click="skip('today')" type="info" round size="large"
>今天</el-button
>
<el-button @click="skip('postMonth')" type="warning" round size="large"
>下月<i class="el-icon-arrow-right"></i>
</el-button>
</div>
<el-calendar id="calendar" v-model="value">
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template slot="dateCell" slot-scope="{ date, data }">
<!--自定义内容-->
<div>
<div class="calendar-day" style="text-align: center; font-size: 22px">
<span class="puday" v-if="brightDate.indexOf(data.day) != -1">{{
data.day.split("-").slice(2).join("-")
}}</span>
<span class="noday" v-else-if="notDate.indexOf(data.day) != -1">{{
data.day.split("-").slice(2).join("-")
}}</span>
<span
class="willday"
v-else-if="willDate.indexOf(data.day) != -1"
@click="open1()"
>{{ data.day.split("-").slice(2).join("-") }}</span
>
<!-- <span v-else class="willday">{{ data.day.split('-').slice(2).join('-') }}</span> -->
</div>
</div>
</template>
</el-calendar>
</div>
</template>
<script>
export default {
data() {
return {
activemonth: "",
calendarData: [
//0-已安排 1-过去未安排 2-未来未安排
{
state: 1,
Date: "2021-09-01",
},
{
state: 0,
Date: "2021-09-02",
},
{
state: 0,
Date: "2021-09-03",
},
,
{
state: 2,
Date: "2021-09-04",
},
{
state: 2,
Date: "2021-09-05",
},
{
state: 2,
Date: "2021-09-06",
},
{
state: 2,
Date: "2021-09-07",
},
{
state: 2,
Date: "2021-09-08",
},
{
state: 2,
Date: "2021-09-09",
},
{
state: 2,
Date: "2021-09-10",
},
{
state: 2,
Date: "2021-09-11",
},
{
state: 2,
Date: "2021-09-12",
},
{
state: 2,
Date: "2021-09-13",
},
{
state: 2,
Date: "2021-09-14",
},
{
state: 2,
Date: "2021-09-15",
},
{
state: 2,
Date: "2021-09-16",
},
{
state: 2,
Date: "2021-09-17",
},
{
state: 2,
Date: "2021-09-18",
},
{
state: 2,
Date: "2021-09-19",
},
{
state: 2,
Date: "2021-09-20",
},
{
state: 2,
Date: "2021-09-21",
},
{
state: 2,
Date: "2021-09-22",
},
{
state: 2,
Date: "2021-09-23",
},
{
state: 2,
Date: "2021-09-18",
},
{
state: 2,
Date: "2021-09-19",
},
{
state: 2,
Date: "2021-09-20",
},
{
state: 2,
Date: "2021-09-21",
},
{
state: 2,
Date: "2021-09-22",
},
{
state: 2,
Date: "2021-09-23",
},
{
state: 2,
Date: "2021-09-24",
},
{
state: 2,
Date: "2021-09-25",
},
{
state: 2,
Date: "2021-09-26",
},
{
state: 2,
Date: "2021-09-27",
},
{
state: 2,
Date: "2021-09-28",
},
{
state: 2,
Date: "2021-09-29",
},
{
state: 2,
Date: "2021-09-30",
},,
{
state: 2,
Date: "2021-09-31",
},
],
value: new Date(),
};
},
computed: {
// 过去处理过的日期
brightDate() {
let ary = [];
for (let i in this.calendarData) {
if (this.calendarData[i].state == 0) {
ary.push(this.calendarData[i].Date);
}
}
return ary;
},
notDate() {
let ary = [];
for (let i in this.calendarData) {
if (this.calendarData[i].state == 1) {
ary.push(this.calendarData[i].Date);
}
}
return ary;
},
willDate() {
let ary = [];
for (let i in this.calendarData) {
if (this.calendarData[i].state == 2) {
ary.push(this.calendarData[i].Date);
}
}
return ary;
},
},
methods: {
// Tooltip 文字提示
skip(flag) {
if (flag === "preMonth")
this.value = new Date(this.value.setMonth(this.value.getMonth() - 1));
else if (flag === "today") this.value = new Date();
else if (flag === "postMonth")
this.value = new Date(this.value.setMonth(this.value.getMonth() + 1));
let date = this.value.getFullYear() + "-" + (this.value.getMonth() + 1);
console.log(date);
},
open1(a) {
this.$router.push({
name: "emergency-item",
params: a
});
//
},
},
mounted() {
let date = this.value.getFullYear() + "-" + (this.value.getMonth() + 1);
console.log(date);
},
};
</script>
<style lang="less">
.puday {
display: inline-block;
width: 95%;
height: 95%;
background-color: #06d6a0;
color: #fff;
}
.puday:hover {
box-shadow: 2px 2px rgba(29, 27, 27, 0.767);
}
.willday:hover {
box-shadow: 2px 2px rgba(29, 27, 27, 0.767);
}
.noday:hover {
box-shadow: 2px 2px rgba(29, 27, 27, 0.767);
}
.willday {
display: inline-block;
width: 100%;
height: 100%;
background-color: #118ab2;
color: #fff;
}
.noday {
display: inline-block;
width: 100%;
height: 100%;
background-color: #ef476f;
color: #fff;
}
.calendar-day {
height: 70px;
}
.el-calendar__button-group {
// 隐藏原生按钮
display: none;
}
.el-calendar__title {
// 隐藏原生按钮
display: none;
}
.button_title {
width: 280px !important;
margin: 0 auto;
}
</style>
<style lang="css">
</style>
2498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
