<template>
<div class="Calendar-container">
<!-- 新增的头部盒子 -->
<div class="calendar-header">
<button class="nav-btn" @click="changeYear(-1)">❮❮</button>
<button class="nav-btn" @click="changeMonth(-1)">❮</button>
<div class="current-date">{{ currentMonth.format('YYYY年M月') }}</div>
<button class="nav-btn" @click="changeMonth(1)">❯</button>
<button class="nav-btn" @click="changeYear(1)">❯❯</button>
</div>
<!-- 原来的头部 -->
<div class="header">
<div v-for="
item in weeks" :key="
item" class="header-
item">{{
item }}</div>
</div>
<!-- 日历主体 -->
<div class="main" :class="{ [viewMode]: true }">
<div v-for="(row, row_index) in timeData" :key="row_index" class="main-row">
<div
v-for="
item in row"
@click="handTime(
item)"
:key="
item.timeStr"
:class="
selectDate ==
item.timeStr ? 'main-row-
item calendarComponent-active' : 'main-row-
item'
"
>
<div
:class="
dayjs(
item.timeStr).isSame(currentMonth, 'month')
? 'main-row-
item-day-text'
: 'main-row-
item-day-text none-month'
"
>
{{
item.date }}
<div class="calendar-tag-wrap">
<div class="calendar-tag-box">
<div
v-for="event in
item.status"
:key="event"
:class="`calendar-tag calendar-tag-status-${event}`"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { computed, ref, watch } from 'vue'
interface Props {
selectDate?: string
viewMode?: 'week' | 'month'
taskData?: Record<string, any>
currentTime?: string
}
const props = w
ithDefaults(defineProps<Props>(), {
selectDate: '',
viewMode: 'week',
taskData: () => ({}),
currentTime: dayjs().format('YYYY-M')
})
const em
it = defineEm
its(['calendarData', 'selectTime'])
const weeks = ['日', '一', '二', '三', '四', '五', '六']
// 响应式 currentMonth，用于控制当前展示的年月
const currentMonth = ref(dayjs(props.currentTime))
// 切换
月份
const changeMonth = (offset: number) => {
currentMonth.value = currentMonth.value.add(offset, 'month')
}
// 切换年份
const changeYear = (offset: number) => {
currentMonth.value = currentMonth.value.add(offset, 'year')
}
// 获取状态标签
const getStatus = (date: string) => {
const tag1 = [2, 4] // 计划内、计划外
const tag2 = [3] // 计划但未跑动
const tag3 = [0, 1] // 未开始的本人计划、未开始的同行计划
const tag4 = [5] // 未跑动的同行计划
const result = (props.taskData[date] || [])
.map((
item: any) => {
if (tag1.includes(
item.status)) return 1
if (tag2.includes(
item.status)) return 2
if (tag3.includes(
item.status)) return 3
if (tag4.includes(
item.status)) return 4
return null
})
.filter(Boolean)
return [...new Set(result)]
}
// 计算日历数据（响应 currentMonth）
const timeData = computed(() => {
const today = dayjs()
const calendar: any[] = []
const startDate = currentMonth.value.startOf('month').day(0) // 从当月第一周开始
if (props.viewMode === 'month') {
for (let i = 0; i < 6; i++) {
const week = []
for (let j = 0; j < 7; j++) {
const day = startDate.clone().add(i * 7 + j, 'day')
const statusArray = getStatus(day.format('MM-DD')) || []
const isInCurrentMonth = day.isSame(currentMonth.value, 'month')
week.push({
time: day.valueOf(),
timeStr: day.format('YYYY-MM-DD'),
date: day.format('DD'),
key: day.format('MM-DD'),
status: statusArray,
cellIndex: i * 7 + j,
isToday: day.isSame(today, 'day'),
isInCurrentMonth: isInCurrentMonth
})
}
calendar.push(week)
}
} else if (props.viewMode === 'week') {
const firstDay = props.selectDate ? dayjs(props.selectDate).day(0) : today.day(0)
const dates = []
for (let i = 0; i < 7; i++) {
const day = firstDay.clone().add(i, 'day')
const statusArray = getStatus(day.format('MM-DD')) || []
dates.push({
time: day.valueOf(),
timeStr: day.format('YYYY-MM-DD'),
date: day.format('DD'),
key: day.format('MM-DD'),
status: statusArray,
isToday: day.isSame(today, 'day')
})
}
calendar.push(dates)
}
em
it('calendarData', calendar)
return calendar
})
// 点击某一天触发事件
const handTime = (
item: any) => {
em
it('selectTime',
item.timeStr)
}
</script>
<style lang="scss" scoped>
.Calendar-container {
width: 100%;
padding-right: 24px;
box-sizing: border-box;
.header {
display: flex;
justify-content: space-between;
margin-top: 18px;
.header-
item {
display: flex;
width: 46px;
font-size: 12px;
line-height: 17px;
color: #333;
justify-content: center;
align-
items: center;
}
}
.main {
margin-top: 2px;
.main-row {
display: flex;
justify-content: space-between;
.main-row-
item {
display: flex;
width: 46px;
height: 46px;
margin-top: 8px;
background-color: #fff;
border-radius: 6px;
opac
ity: 1;
justify-content: center;
align-
items: center;
.main-row-
item-day-text {
pos
ition: relative;
font-size: 14px;
font-weight: 700;
line-height: 16px;
.calendar-tag-wrap {
pos
ition: absolute;
left: 50%;
transform: translateX(-50%);
.calendar-tag-box {
display: flex;
}
.calendar-tag {
width: 3px;
height: 3px;
margin-left: 3px;
border-radius: 50%;
&:first-child {
margin-left: 0;
}
}
.calendar-tag-status-1 {
background-color: #00a870;
}
.calendar-tag-status-2 {
background-color: #ff3141;
}
.calendar-tag-status-3 {
background-color: #ff7d00;
}
.calendar-tag-status-4 {
background-color: #999;
}
}
}
.none-month {
color: #999;
}
}
.calendarComponent-active {
background-color: blue;
.main-row-
item-day-text {
color: #fff;
}
}
}
}
&-ipad {
.main-row {
gap: 0 16px;
.main-row-
item {
flex: 1;
}
}
.header {
gap: 0 16px;
.header-
item {
flex: 1;
}
}
}
}
.calendar-header {
display: flex;
align-
items: center;
justify-content: space-between;
padding: 10px 0;
font-size: 16px;
font-weight: bold;
.nav-btn {
margin: 0 4px;
font-size: 18px;
cursor: pointer;
background: none;
border: none;
}
.current-date {
flex: 1;
text-align: center;
}
.today-btn {
padding: 4px 10px;
font-size: 12px;
color: wh
ite;
cursor: pointer;
background-color: #007bff;
border: none;
border-radius: 4px;
}
}
</style>
当前代码在收起状态下切换
月份和年份需要展示当前切换后
月份的首周排列
四五月份学习总结
扫一扫
1638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
