当前周
下一周
html部分
<!-- 日历主体 -->
<view class="calendar_box">
<div class="left">
<image src="../../static/all_icon.png" ></image>
<text>全部</text>
</div>
<swiper class="cel" :current="index" circular="true" @change="change">
<swiper-item
class="cel-days"
v-for="(item, index) in weeks"
:key="index"
>
<view
:class="d.date == currentDate ? 'day selected' : 'day'"
v-for="(it, i) in item"
:key="i"
@click="tapDate(it.date)"
>
<div
:class="it.date == selectday ? 'day_box selectday ' : 'day_box'"
:id="it.date == today ? 'today' : ''"
>
<div class="item1">{{ it.week | weekfilter }}</div>
<div class="item2 fw" v-if="it.day == '01'">
{{ it.month }}月
</div>
<div class="item2" v-else>{{ it.day }}</div>
<div class="item3">1场</div>
<div class="spot"></div></div
></view>
</swiper-item>
</swiper>
<div class="right" @click="goCalendar">
<image src="../../static/cal_icon.png" ></image>
<text>日历</text>
</div>
</view>
javascript部分
<script>
import dayjs from "../../timer/dayjs.min.js";
export default {
data() {
return {
curIndex: 0,
index: 0,
weeks: [],
currentDate: dayjs().format("YYYY-MM-DD"),
today: dayjs().format("YYYY-MM-DD"),
startDate: null,
endDate: null,
selectday: dayjs().format("YYYY-MM-DD"),
};
},
onShow(option) {
this.init();
},
methods: {
tapDate(date) {
this.selectday = date;
},
// 去日历页面
goCalendar() {
uni.navigateTo({
url: "/pages/calendar_page/calendar_page",
});
},
change(e) {
let { currentDate, index, weeks, startDate, endDate } = this;
let current = e.detail.current;
let aDate =
current - index == -2 || current - index == 1 ? endDate : startDate;
// console.log(aDate, "aDate");
// console.log(current, "current");
if (current == 0) {
weeks = [
this.getWeek(0, aDate),
this.getWeek(1, aDate),
this.getWeek(-1, aDate),
];
startDate = weeks[2][0].date;
endDate = weeks[1][0].date;
currentDate = weeks[0][0].date;
}
if (current == 1) {
weeks = [
this.getWeek(-1, aDate),
this.getWeek(0, aDate),
this.getWeek(1, aDate),
];
(startDate = weeks[0][0].date),
(endDate = weeks[2][0].date),
(currentDate = weeks[1][0].date);
}
if (current == 2) {
weeks = [
this.getWeek(1, aDate),
this.getWeek(-1, aDate),
this.getWeek(0, aDate),
];
(startDate = weeks[1][0].date),
(endDate = weeks[0][0].date),
(currentDate = weeks[2][0].date);
}
this.weeks = weeks;
this.startDate = startDate;
this.endDate = endDate;
this.currentDate = currentDate;
this.index = current;
// console.log(currentDate, "currentDate");
// console.log(endDate, "endDate");
// console.log(startDate, "startDate");
},
curBtn(index) {
this.curIndex = index;
},
init() {
// 构造一个数组[[],[],[]],里边放3个星期的数据,[0]放本周,[1]放下一周,[2]放上一周
let { weeks, startDate, endDate, currentDate } = this;
let firstDayOfWeek = dayjs(currentDate).subtract(3, "day");
weeks = [
this.getWeek(0, firstDayOfWeek),
this.getWeek(1, firstDayOfWeek),
this.getWeek(-1, firstDayOfWeek),
];
// console.log(weeks[1][6].date, "weeks[1][6].date");
startDate = weeks[2][0].date;
endDate = weeks[1][0].date;
this.weeks = weeks;
this.startDate = startDate;
this.endDate = endDate;
this.currentDate = firstDayOfWeek;
// console.log(this.weeks, this.startDate, this.endDate);
},
// direction 接收 0,1,-1三个值,分别代表,本周,下周,上周
getWeek(direction, date) {
date = dayjs(date);
// console.log(date.format("YYYY-MM-DD"), "getWeek");
let firstDayOfWeek = date.subtract(date.day(), "day");
// console.log(firstDayOfWeek,'firstDayOfWeek');
let arr = [];
for (let i = direction * 7; i < (1 + direction) * 7; i++) {
let d = date.add(i, "day");
// console.log(d);
arr.push({
date: d.format("YYYY-MM-DD"),
day: d.format("DD"),
week: d.day(),
month: d.month() + 1,
});
}
return arr;
},
},
filters: {
weekfilter(v) {
let str = null;
switch (v) {
case 0:
str = "周日";
break;
case 1:
str = "周一";
break;
case 2:
str = "周二";
break;
case 3:
str = "周三";
break;
case 4:
str = "周四";
break;
case 5:
str = "周五";
break;
case 6:
str = "周六";
break;
default:
break;
}
return str;
},
},
};
</script>
css部分
<style>
.calendar_box {
display: flex;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
border-radius: 4rpx;
margin: 0 auto;
height: 124rpx;
width: 686rpx;
}
.calendar_box .center {
height: 124rpx;
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
display: flex;
align-items: center;
overflow-x: auto;
width: 490rpx;
}
.day {
}
.left image,
.right image {
width: 40rpx;
height: 40rpx;
/* margin-bottom: -4rpx; */
}
.left,
.right {
display: flex;
align-items: center;
display: flex;
width: 98rpx;
/* line-height: 36rpx; */
justify-content: center;
background: #f3f4f6;
border-radius: 0px 4rpx 4rpx 0px;
flex-direction: column;
font-size: 20rpx;
color: #444444;
}
.left {
background: #ea4336;
border-radius: 4rpx 0px 0px 4rpx;
color: #fff;
}
.right text {
margin-top: 10rpx;
}
.cel {
height: 80rpx;
width: 100%;
height: 124rpx;
/* margin-bottom: 16rpx; */
}
.cel-days {
display: flex;
/* background-color: pink; */
height: 100%;
}
.day {
flex: 1;
color: #333;
/* background-color: orange; */
align-items: center;
text-align: center;
justify-content: center;
font-size: 24rpx;
}
.day_box {
text-align: center;
display: inline-block;
height: 124rpx;
position: relative;
width: 100%;
/* width: 98rpx; */
/* border: 1rpx solid #000; */
border-radius: 4rpx;
border: 1rpx solid #fff;
}
.selectday {
/* background-image: linear-gradient(-45deg, #3857e3, #567bfd); */
border: 1rpx solid red;
font-weight: bold;
}
#today {
color: red;
}
.emary {
width: 100%;
text-align: center;
margin: 32rpx auto;
display: flex;
align-items: center;
flex-direction: column;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 44rpx;
}
.emary image {
width: 472rpx;
}
.item1,
.item3,
.item2 {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
/* background: #875ec3; */
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
margin-top: 6rpx;
overflow: hidden;
}
.item2 {
/* background: #ffb827; */
width: 100%;
font-size: 32rpx;
}
.item3 {
margin-top: 2rpx;
width: 100%;
}
.fw {
font-weight: 600;
}
#today .spot {
width: 6rpx;
height: 6rpx;
background-color: #ea4336;
border-radius: 50%;
position: absolute;
left: 48%;
bottom: 6rpx;
}
</style>