<template> <div class="my-calendar-container"> <div class="top-title"> <Icon name="arrow-left" @click="pre" /> <span>{{nowMonth}} {{nowYear}}</span> <Icon name="arrow" @click="next" /> </div> <div class="weeks"> <span>M</span> <span>T</span> <span>W</span> <span>T</span> <span>F</span> <span>S</span> <!-- 印尼周日放到最初一天 --> <span>S</span> </div> <div class="line"></div> <div class="day-box"> <span v-for="(item,index) in days" :key="index" :style="getStyle(item)" @click="handleClick(item)">{{item.day}}<i v-if="index%6 ===0" class="point-box" /></span> </div> </div></template><script setup lang="ts"> import {ref } from 'vue' import { Icon } from 'vant'; const nowDate = new Date() let nowYear = nowDate.getFullYear() let nowMonth = nowDate.getMonth() + 1 const nowDay = nowDate.getDate() let days: any = ref([]) // 获取日期展现列表 const getDaysList = (year: number, month: number,activeDay:number) => { days.value = [] const nowMonthCount = new Date(year, month, 0).getDate() // 获取本月有多少天 const preMonthCount = new Date(month > 0 ? year : (year - 1), month > 0 ? (month - 1) : 12, 0).getDate() // 获取上月有多少天 const monthOne = getMonthOne(year, month) // 补全上个月 if (monthOne > 1) { for (let i = monthOne - 2; i >= 0; i--) { days.value.push({day: preMonthCount - i,disabled: true,activeDay:false}) } } // 当月 for (let i = 0; i < nowMonthCount; i++) { days.value.push({day: i + 1,disabled: false,activeDay: activeDay === (i+1)}) } // 补全下月 if (days.value.length % 7) { for (let i = 0; i < days.value.length % 7; i++) { days.value.push({day: i + 1,disabled: true,activeDay:false}) } } } // 上个月 const pre = () => { nowYear = nowMonth===1? (nowYear - 1) : nowYear nowMonth = nowMonth===1? 12 : (nowMonth-1) getDaysList(nowYear, nowMonth,1) } // 下个月 const next = () => { nowYear = nowMonth===12? (nowYear + 1) : nowYear nowMonth = nowMonth===12? 1 : (nowMonth+1) getDaysList(nowYear, nowMonth,1) } const getStyle = (item:any) => { if(item.activeDay) { return {background: '#D41367',color:'#fff'} }else if(item.disabled) { return {background: '#FFF',color:'#C7C7C7'} }else { return {background: '#FFF',color:'#101010'} } } // 点击日期 const handleClick = (item:any) => { if(!item.disabled) { getDaysList(nowYear,nowMonth,item.day) } } // 获取某月1号星期几 const getMonthOne = (year: number, month: number) => new Date(year, month - 1, 1).getDay() % 7 // 星期天第7天 getDaysList(nowYear, nowMonth,nowDay)</script><style lang="scss" scoped> .my-calendar-container { padding: 24px; background: #fff; padding-bottom: 15px; // width: 100%; // height: 307px; .top-title { display: flex; justify-content: space-between; align-items: center; ::v-deep .van-icon { font-size: 18px; } &>span { font-size: 14px; font-family: Lato-Bold, Lato; font-weight: bold; color: #101010; } } .weeks { width: 100%; margin-top: 26px; display: grid; grid-template-columns: repeat(7, calc(100%/7)); text-align: center; &>span { text-align: center; font-size: 9px; font-family: Lato-Regular, Lato; font-weight: 400; color: #101010; } } .line { margin-top: 7px; height: 1px; background-color: #E5E5E5; } .day-box { display: grid; grid-template-columns: repeat(7, calc(100%/7)); &>span { position: relative; width: 29px; height: 29px; margin: 7px auto; // background: #D41367; line-height: 29px; text-align: center; border-radius: 50%; font-size: 13px; font-family: Lato-Regular, Lato; i.point-box { position: absolute; width: 5px; height: 5px; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 50%; background-color: #D41367; } } } }</style>