图片
思路 表头： 上一年、上一月、当前月份展示、下一月、下一年 表体： 7列：["日", "一", "二", "三", "四", "五", "六"] 6行：一共必须包含本月所有日期，会有两种情况：（1）5行能展示完全（2）6行能展示完全，兼容两种情况选择无论什么情况都展示6行 想清楚以上，思路就非常清晰了，我们只需要找到表格中的第一个日期，然后42个格子每个格子依次往后推一天就可以了ini 代码解读复制代码import dayjs from "dayjs";
const getDateList = () => {
const firstDay = showDate.value.dayjs.startOf("month").startOf("week");
const rows = 6;
return Array(rows * 7)
.fill(0)
.map((n, i) => {
const day = firstDay.add(i, "day");
return getCalendarDate(day);
});
};
选中的日期：我们需要有一个值来记录选中的日期，方便高亮展示也方便后面切换时根据选中的日期展示当前月份，所以定义了一个对象，默认是选中当前日期
ini 代码解读复制代码const getCalendarDate = (dayjs) => {
return {
year: dayjs.year(),
month: dayjs.month(),
date: dayjs.date(),
value: dayjs.format(props.format),
dayjs: dayjs
};
};
const currentDate = ref(getCalendarDate(dayjs()));
展示的日期：因为可以切换上一年、上一月、下一月、下一年，所以展示的日期会存在和选中的日期不同的情况，也需要一个对象来记录，默认情况下展示的日期等于选中的日期
csharp 代码解读复制代码const showDate = ref(currentDate.value)切换月份、年份：有了上面的这些，实现起来就非常容易，修改展示日期，然后根据展示日期重新获取6*7的日期列表
ini 代码解读复制代码const nextMonth = (number) => {
showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "month"));
dateList.value = getDateList();
};
const nextYear = (number) => {
showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "year"));
dateList.value = getDateList();
};
修改日期：同样只需要修改选中日期、展示日期，然后根据展示日期重新获取日期列表，同时抛出一个change事件，给外部使用
ini 代码解读复制代码const emit = defineEmits(["change"]);
const handleChangeCurrent = (dayjs: Dayjs) => {
currentDate.value = getCalendarDate(dayjs);
showDate.value = currentDate.value;
dateList.value = getDateList();
emit("change", currentDate.value);
};
小红点、非当前月日期灰色展示：这些就是一些简单的判断了，根据展示日期和选中日期来判断就行
ini 代码解读复制代码<td v-for="date in dateList.slice((row - 1) * 7, (row - 1) * 7 + 7)" :key="date.value">
<div
class="calendar-date hand"
:class="{
'calendar-date--grey': date.month !== showDate.month,
'calendar-date--today': date.value === currentDate.value
}"
@click="handleChangeCurrent(date.dayjs)"
>
<span>{{ date.date }}</span>
<span v-if="props.dotDays.includes(date.value)" class="calendar-dot"></span>
</div>
</td>
源码
xml 代码解读复制代码<template>
<div class="calendar">
<div class="calendar-header">
<div class="calendar-header__left">
<el-icon class="hand" @click="nextYear(-1)"><DArrowLeft /></el-icon>
<el-icon class="hand" @click="nextMonth(-1)"><ArrowLeft /></el-icon>
</div>
<div class="calendar-header__center">{{ showDate.year }} 年 {{ showDate.month + 1 }} 月</div>
<div class="calendar-header__right">
<el-icon class="hand" @click="nextMonth(1)"><ArrowRight /></el-icon>
<el-icon class="hand" @click="nextYear(1)"><DArrowRight /></el-icon>
</div>
</div>
<div class="calendar-main">
<table class="calendar-table">
<thead class="calendar-thead">
<tr>
<th v-for="(day, index) in sevenDay" :key="index">{{ day }}</th>
</tr>
</thead>
<tbody class="calendar-tbody">
<tr v-for="row in rows" :key="row">
<td v-for="date in dateList.slice((row - 1) * 7, (row - 1) * 7 + 7)" :key="date.value">
<div
class="calendar-date hand"
:class="{
'calendar-date--grey': date.month !== showDate.month,
'calendar-date--today': date.value === currentDate.value
}"
@click="handleChangeCurrent(date.dayjs)"
>
<span>{{ date.date }}</span>
<span v-if="props.dotDays.includes(date.value)" class="calendar-dot"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script lang="ts" setup>
import dayjs, { Dayjs } from "dayjs";
interface CalendarDate {
year: number;
month: number;
date: number;
value: string;
dayjs: Dayjs;
}
interface Props {
dotDays?: string[]; // 需要加点的日期
format?: string; // 日期格式，必须保证格式化后的日期是唯一的，默认YYYY-MM-DD(参考dayjs)
current?: string; // 当前选中的日期，格式与format保持一致,默认选择当前日期
disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
dotDays: () => [], // ["2023-09-19", "2023-09-20", "2023-08-31"]
format: "YYYY-MM-DD",
disabled: false
});
const sevenDay: Array<string> = ["日", "一", "二", "三", "四", "五", "六"];
const dateList = ref<CalendarDate[]>([]);
const getCalendarDate = (dayjs: Dayjs): CalendarDate => {
return {
year: dayjs.year(),
month: dayjs.month(),
date: dayjs.date(),
value: dayjs.format(props.format),
dayjs: dayjs
};
};
// 选中的日期
const currentDate = ref<CalendarDate>(getCalendarDate(dayjs()));
// 当前日历展示的日期
const showDate = ref<CalendarDate>(currentDate.value);
// 获取日期列表，6*7天
const rows = 6;
const getDateList = (): Array<CalendarDate> => {
const firstDay = showDate.value.dayjs.startOf("month").startOf("week");
return Array(rows * 7)
.fill(0)
.map((n, i) => {
const day = firstDay.add(i, "day");
return getCalendarDate(day);
});
};
const nextMonth = (number: number) => {
showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "month"));
dateList.value = getDateList();
};
const nextYear = (number: number) => {
showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "year"));
dateList.value = getDateList();
};
// 修改选中日期
const emit = defineEmits(["change"]);
const handleChangeCurrent = (dayjs: Dayjs) => {
if (props.disabled) return;
currentDate.value = getCalendarDate(dayjs);
showDate.value = currentDate.value;
dateList.value = getDateList();
emit("change", currentDate.value);
};
onMounted(() => {
if (props.current) {
handleChangeCurrent(dayjs(props.current, props.format));
} else {
dateList.value = getDateList();
}
});
</script>
<style lang="scss" scoped>
.calendar {
user-select: none;
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 22px;
padding: 0 12px;
font-size: 14px;
color: var(--el-text-color-primary);
}
.calendar-main {
padding-bottom: 12px;
margin-top: 12px;
}
.calendar-table {
width: 100%;
th,
td {
// width: (100/7);
width: 14.285%;
min-width: 40px;
padding: 4px 0;
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--el-text-color-primary);
text-align: center;
}
th {
color: #bfbfbf;
}
}
.calendar-date {
position: relative;
width: 24px;
height: 24px;
margin: -1px auto;
border-radius: 2px;
&--grey {
color: #bfbfbf;
}
&:hover {
background: var(--el-color-primary-light-9);
}
&--today {
color: #ffffff !important;
background: var(--el-color-primary) !important;
}
}
.calendar-dot {
position: absolute;
top: -3px;
right: -3px;
width: 6px;
height: 6px;
background-color: #fc474c;
border-radius: 50%;
}
}
.hand {
cursor: pointer;
}
</style>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。