<template>
<view class="maon">
<view class="time">
<view class="flex" style="justify-content: space-between">
<u-icon name="arrow-right" color="#484848" :label="month+'月'" labelColor='#484848' labelPos='left'
labelSize='40rpx' size='30rpx'></u-icon>
<view>
<u-icon name="arrow-left" color="#484848" size='40rpx' @click="getPreviousMonth"></u-icon>
<u-icon name="arrow-right" style="margin-left: 62rpx;" color="#484848" size='40rpx'
@click="getNextMonth"></u-icon>
</view>
</view>
<view class="flex" style="justify-content: space-between">
<view v-for="(i,index) in weekname" :key="i">
<view class="flex" style="flex-direction: column;">
<view class="week">{{i}}</view>
<view v-for="(inm,ins) in weekday" :class="id==(ins*7+index)?'cla chec':'cla'"
@click="mack(ins*7+index)" :key="ins*7+index">
{{getdata(ins*7+index)}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
month: 11,
year: 2023,
weekname: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
day: [],
weekday: 0,
id: null
};
},
onLoad() {
this.year = new Date().getFullYear();
this.month = new Date().getMonth() + 1;
this.gettiem(this.year, this.month)
},
methods: {
mack(i) {
this.id = i
},
gettiem(year, month) {
this.day = this.getCalendarArray(year, month);
this.weekday = Math.floor(this.day.length / 7) + 1
},
//上个月
getPreviousMonth() {
this.id = null
if (this.month === 1) {
this.year = this.year - 1;
this.month = 12
} else {
this.month = this.month - 1
}
this.gettiem(this.year, this.month)
},
//下个月
getNextMonth() {
this.id = null
if (this.month === 12) {
this.year = this.year + 1;
this.month = 1
} else {
this.month = this.month + 1
}
this.gettiem(this.year, this.month)
},
getdata(index) {
if (this.day[index]) {
return this.day[index].date
} else {
return ''
}
},
getCalendarArray(year, month) {
const calendarArray = [];
for (let i = 1; i < new Date(year, month - 1, 1).getDay(); i++) {
calendarArray.push({
date: '',
dayOfWeek: i,
})
}
const daysInMonth = new Date(year, month, 0).getDate();
for (let i = 1; i <= daysInMonth; i++) {
const day = new Date(year, month - 1, i);
calendarArray.push({
date: i,
dayOfWeek: day.getDay(),
});
}
return calendarArray;
},
}
}
</script>
<style>
page {
background-color: #F0F0F0;
}
</style>
<style scoped lang="scss">
.maon {
padding: 26rpx 32rpx 46rpx 32rpx;
}
.flex {
display: flex;
align-items: center;
}
.week {
margin: 30rpx 0 20rpx;
font-size: 26rpx;
font-weight: 600;
color: rgba(60, 60, 67, 0.3);
line-height: 36rpx;
}
.cla {
font-size: 40rpx;
font-family: SF Pro Display-Regular, SF Pro Display;
font-weight: 400;
color: #484848;
height: 48rpx;
margin-bottom: 20rpx;
position: relative;
z-index: 5;
}
.chec {
font-size: 40rpx;
font-family: SF Pro Display-Regular, SF Pro Display;
font-weight: 400;
color: #FFFFFF;
background: #FF0000;
border-radius: 50%;
width: 58rpx;
text-align: center;
height: 58rpx;
}
.time {
box-sizing: border-box;
width: 686rpx;
background: #FFFFFF;
box-shadow: 0rpx 20rpx 120rpx 0rpx rgba(0, 0, 0, 0.1);
border-radius: 12rpx;
padding: 34rpx 32rpx;
}
</style>
日历uniapp
最新推荐文章于 2024-08-08 17:36:26 发布