实现一个日历组件，可以在对应的日期下显示其他数据；可以切换上月下月；回到今天；点击日期为其他月份的时候自动切换到该月。
<template>
<div class="w-full calender-com">
<h2 class="w-full flex justify-between items-center ">
<span class="text-333">{
{ year + "年" + month + "月" }}</span>
<div class="btn-wrap flex justify-between">
<button class="btn" @click="changeMonth(-1)">
<span>{
{ '<<' }}上个月</span>
</button>
<button class="btn" @click="changeMonth(1)">
<span>下个月{
{ '>>' }}</span>
</button>
</div>
<button class="btn" @click="getNowDate()">回到今天</button>
</h2>
<!-- <div class="w-full flex justify-between items-end calender-head">
<div class="select-con cursor-pointer">
<div @click="showOption">{
{ currMonth }}<span class="arrow"
:class="[isDrop ? 'arrow-top' : 'arrow-bottom']"></span>
</div>
<ul v-show="isDrop" class="option-con">
<li v-for="item in timeoptions" :key="item['value']" @click="selectMonth(item['value'])">{
{ item.label }}</li>
</ul>
</div>
</div> -->
<div class="shadow-con">
<div class="w-full flex flex-wrap justify-start calender-zhou">
<div class="w-item">周一</div>
<div class="w-item">周二</div>
<div class="w-item">周三</div>
<div class="w-item">周四</div>
<div class="w-item">周五</div>
<div class="w-item">周六</div>
<div class="w-item">周日</div>
</div>
<div class="w-full flex flex-wrap justify-start calender-main">
<div class="w-item" v-for="item in daylist" :key="item.timestamp" :class="item.month !== month ? 'bg-ee' : ''"
@click="clickevent(item)">
<div class="w-full flex justify-center items-center text-center">
<span class="day-mum">{
{ item.day }}</span>
<span
v-if="item.day === xianzaitime['day'] && item.month === xianzaitime['month'] && item.year === xianzaitime['year']"
class="text-red">今天</span>
<!-- <span>{
{ item.zhou }}</span> -->
</div>
<!-- <div>{
{ item.number }}</div> -->
<slot :name="`${item.year}-${item.month}-${item.day}`" :year="item.year" :month="item.month" :day="item.day"
:week="item.week"></slot>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
export interface ObjConfig {
timestamp: any,
year: any
month: any,
day: any,
number: any
}
const emit = defineEmits(["handleclick", "changemonth"])
// 需要展示的所有日期列表
const daylist: any = ref([])
// 年月日数据暂存
const shijian = ref(null)
const year = ref(0)
const month = ref(0)
const day = ref(0)
// let timeoptions: any = ref([
// { value: '2023-2', label: '2023年02月', id: '2' },
// { value: '2023-3', label: '2023年03月', id: '3' }
// ])
// const currMonth = ref('')
let isDrop = ref(false)
const getNowDate = (canshu = null) => {
// 置空日期列表
daylist.value = []
if (canshu) {
shijian.value = new Date(canshu)
} else {
shijian.value = new Date();
}
year.value = shijian.value.getFullYear()
month.value = shijian.value.getMonth() + 1
day.value = shijian.value.getDate()
// 当前显示月份改变后，需要向父组件抛出，父组件可以根据月份更新日程
emit("changemonth", { year: year.value, month: month.value })
getDaylist()
}
// 计算需要展示的第一个日期
const startandendday = () => {
const cloneNowDate = new Date(shijian.value);
// 先获取这个月的第一天
const firstdaytime = cloneNowDate.setDate(1)
// 获取第一天是周几
let firstdayweek = new Date(firstdaytime).getDay()
if (firstdayweek === 0) {
firstdayweek = 7
}
// 展示时间的第一天
return firstdaytime - (firstdayweek - 1) * 24 * 60 * 60 * 1000
}
// 向列表填充数据
const getDaylist = () => {
const starttime = startandendday()
for (let i = 0; i <= 60; i++) {
let shuju: any = {}
const shijianchuo = starttime + i * 24 * 60 * 60 * 1000
const sj = new Date(shijianchuo)
const year1 = sj.getFullYear()
const month1 = sj.getMonth() + 1
const day1 = sj.getDate()
const week = sj.getDay()
if (month.value === 1) {
if (month1 > month.value && month1 !== 12) {
if (week === 1 || week === 7) { break }
}
} else if (month.value === 12) {
if (month1 - month.value === -11) {
if (week === 1 || week === 7) { break }
}
} else {
if (month1 > month.value) {
if (week === 1 || week === 7) { break }
}
}
shuju["timestamp"] = shijianchuo
shuju["year"] = year1
shuju["month"] = month1
shuju["day"] = day1
shuju["week"] = week
// shuju["zhou"] = dict2(week)
daylist.value.push(shuju)
}
}
// 日期点击事件
const clickevent = (item: any) => {
// const id = timeoptions.value.find((it: any) => it.label === currMonth.value).id
// if (item.month !== Number(id)) return false
// emit("handleclick", item)
// --------------------以上是下拉选择月份形式，对于日期的点击，不是当前月的日期无交互
// 如果点击的日期不是当前月的，修改当前时间
if (item.month !== month.value) {
getNowDate(item.timestamp)
currMonth.value = timeoptions.value.find(it => Number(it.id) === item.month)?.label
}
/emit("handleclick", item)
}
// 点击上个月或者下个月
const changeMonth = (num: any) => {
let newmonth = month.value + num
// 如果大于12，转到下一年
if (newmonth > 12) {
year.value += 1
newmonth = 1
}
if (newmonth < 1) {
year.value -= 1
newmonth = 12
}
const sj = new Date(Date.parse(year.value + "/" + newmonth + "/" + day.value)).getTime()
getNowDate(sj)
}
// 获取今天的时间
const xianzaitime = ref({})
const getnow = () => {
const sj = new Date()
xianzaitime.value['year'] = sj.getFullYear()
xianzaitime.value["month"] = sj.getMonth() + 1
xianzaitime.value["day"] = sj.getDate()
const maxId = timeoptions.value[timeoptions.value.length - 1].id
if (Number(maxId) < xianzaitime.value["month"]) {
for (let i = Number(maxId) + 1; i <= xianzaitime.value["month"]; i++) {
let obj
if (i <= 9) {
obj = { value: `${xianzaitime.value["year"]}-${i}`, label: `${xianzaitime.value["year"]}年0${i}月`, id: i.toString() }
} else {
obj = { value: `${xianzaitime.value["year"]}-${i}`, label: `${xianzaitime.value["year"]}年${i}月`, id: i.toString() }
}
timeoptions.value.push(obj)
}
}
currMonth.value = timeoptions.value.find(item => Number(item.id) === xianzaitime.value["month"])?.label
}
// 初始化区域
getnow()
getNowDate()
const showOption = () => {
isDrop.value = !isDrop.value
}
const selectMonth = (val: any) => {
isDrop.value = false
currMonth.value = timeoptions.value.find((item: any) => item.value === val).label
year.value = Number(val.split('-')[0])
let newmonth = Number(val.split('-')[1])
const sj = new Date(Date.parse(year.value + "/" + newmonth + "/" + day.value)).getTime()
getNowDate(sj)
// emit("changemonth", { year: year.value, month: newmonth })
}
</script>
<style scoped>
.calender-com {
width: 100%;
background-color: #fff;
}
.text-center {
text-align: center;
}
.flex {
display: flex;
}
.justify-start {
justify-content: start;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.calender-com .shadow-con {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.09);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.calender-com h2 {
font-size: 16px;
line-height: 20px;
padding-bottom: 10px;
}
.shadow-con .btn-wrap {
border: 1px solid #ccc;
padding: 2px 5px;
border-radius: 10px;
width: 180px;
}
.btn-wrap .btn {
width: 90px;
}
.btn:first-child {
border-right: 1px solid #ccc;
}
.btn-wrap .btn:hover {
color: #aa0000;
}
.calender-com .calender-head {
padding-bottom: 10px;
color: #333;
}
.calender-com .calender-head p {
font-size: 18px;
line-height: 24px;
color: #333333;
padding-top: 20px;
}
.select-con {
width: 136px;
height: 26px;
line-height: 26px;
border: 1px solid #EEEEEE;
border-radius: 13px;
text-align: center;
position: relative;
}
.select-con .arrow {
display: inline-block;
width: 8px;
height: 8px;
border-top: 1px solid #333;
border-left: 1px solid #333;
margin-left: 3px;
margin-top: -6px;
vertical-align: middle;
transform: rotate(-135deg);
}
.select-con .arrow.arrow-top {
margin-top: 4px;
transform: rotate(45deg);
}
.option-con {
position: absolute;
width: 100%;
padding: 10px 0;
border: 1px solid #eee;
z-index: 9999;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.option-con li {
line-height: 26px;
font-size: 14px;
}
.option-con li:hover {
background-color: #eee;
}
.calender-zhou .w-item {
width: 14.285%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #fff;
flex: 0 0 14.285%;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
.calender-main .w-item {
width: 14.285%;
height: 80px;
position: relative;
flex: 0 0 14.285%;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
.items-center {
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.w-full {
width: 100%;
}
.calender-main .w-item.day-mum {
position: absolute;
z-index: 99;
left: 0;
right: 0;
padding-top: 30px;
text-align: center;
}
.text-red {
color: red;
}
.bg-ee {
background-color: #eee;
}
</style>
使用------------------------------------------------------------------------
<template>
<div>
<Calendar @changemonth="changemonth" @handleclick="dayClick">
<template v-for="item in list" v-slot:[item.label]>
<div :class="[Number(item['num']) >= 0 ? 'bg-pink' : 'bg-green']">+{
{ Number(item['num'] * 100).toFixed(2) }}%
</div>
</template>
</Calendar>
</div>
</template>
<script lang="ts" setup>
let list = ref([
{
label: '2023-4-4', num: 0.066
},
{ label: '2023-4-20', num: 0.0389 },
{ label: '2023-4-21', num: -0.0289 }
])
// 月份改变
const changemonth = (val) => {
console.log(val)
}
// 日期点击
const dayClick = (item) => {
console.log(item)
}
</script>
组件里注释的部分代码是实现的下拉，下拉选择项的月份根据当前的月份，把当前月以及之前的月push进去，但是只实现了当前年的，前一年的就无法选择；并且点击日历中某一天的时候，若不是当前月，不做任何处理
