140 lines
3.4 KiB
Vue
140 lines
3.4 KiB
Vue
<template>
|
|
<view class="calendar">
|
|
<view class="header">
|
|
<text @click="changeMonth(-1)">《</text>
|
|
<text>{{ currentYear }}年{{ currentMonth + 1 }}月</text>
|
|
<text @click="changeMonth(1)">》</text>
|
|
</view>
|
|
<view class="weekdays">
|
|
<text v-for="day in weekdays" :key="day">{{ day }}</text>
|
|
</view>
|
|
<view class="days">
|
|
<view
|
|
v-for="day in days"
|
|
:key="day.date"
|
|
:class="{ 'current-month': day.currentMonth, 'other-month': !day.currentMonth }"
|
|
@click="selectDate(day)"
|
|
>
|
|
<text>{{ day.day }}</text>
|
|
<!-- <view>999</view> -->
|
|
<view v-if="day.customContent" class="custom-content">
|
|
{{ day.customContent }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentYear: new Date().getFullYear(),
|
|
currentMonth: new Date().getMonth(),
|
|
weekdays: ['日', '一', '二', '三', '四', '五', '六'],
|
|
days: [],
|
|
customDates: {
|
|
'2023-06-15': '自定义内容'
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.generateCalendar()
|
|
},
|
|
methods: {
|
|
generateCalendar() {
|
|
const firstDay = new Date(this.currentYear, this.currentMonth, 1)
|
|
const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0)
|
|
const daysInMonth = lastDay.getDate()
|
|
const startingDay = firstDay.getDay()
|
|
|
|
this.days = []
|
|
|
|
for (let i = 0; i < startingDay; i++) {
|
|
const prevMonthLastDay = new Date(this.currentYear, this.currentMonth, 0).getDate()
|
|
this.days.push({
|
|
day: prevMonthLastDay - startingDay + i + 1,
|
|
currentMonth: false,
|
|
date: new Date(this.currentYear, this.currentMonth - 1, prevMonthLastDay - startingDay + i + 1)
|
|
})
|
|
}
|
|
|
|
for (let i = 1; i <= daysInMonth; i++) {
|
|
const date = new Date(this.currentYear, this.currentMonth, i)
|
|
const dateString = `${this.currentYear}-${String(this.currentMonth + 1).padStart(2, '0')}-${String(i).padStart(
|
|
2,
|
|
'0'
|
|
)}`
|
|
this.days.push({
|
|
day: i,
|
|
currentMonth: true,
|
|
date: date,
|
|
customContent: this.customDates[dateString]
|
|
})
|
|
}
|
|
|
|
const remainingDays = 42 - this.days.length
|
|
for (let i = 1; i <= remainingDays; i++) {
|
|
this.days.push({
|
|
day: i,
|
|
currentMonth: false,
|
|
date: new Date(this.currentYear, this.currentMonth + 1, i)
|
|
})
|
|
}
|
|
},
|
|
changeMonth(delta) {
|
|
this.currentMonth += delta
|
|
if (this.currentMonth > 11) {
|
|
this.currentMonth = 0
|
|
this.currentYear++
|
|
} else if (this.currentMonth < 0) {
|
|
this.currentMonth = 11
|
|
this.currentYear--
|
|
}
|
|
this.generateCalendar()
|
|
},
|
|
selectDate(day) {
|
|
console.log('选择的日期', day.date)
|
|
// 在这里可以添加选择日期后的逻辑
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.calendar {
|
|
width: 100%;
|
|
/* padding: 20rpx; */
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.weekdays {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.days {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.days view {
|
|
width: 14.28%;
|
|
height: 80rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.other-month {
|
|
color: #ccc;
|
|
}
|
|
.custom-content {
|
|
font-size: 20rpx;
|
|
color: #007aff;
|
|
}
|
|
</style>
|