JS：绘制日历，结合vue3食用

本文主要是介绍JS：绘制日历，结合vue3食用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

思路解析：假设展示2023年12月的日历

①通过new Date(new Date(2023,12).setDate(0)).getDate()获取2023.12月的天数lastDay

②通过new Date(2023,11,1).getDay()获取2023.12月第一天的起始位置startDay

③根据自己的需求在startDay和lastDay的前后补0，当前值为0的不显示

具体实现：

html部分

<div class="calendar"><header><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></header><section><div v-for="item in data.dateArr" :key="item.key" :style="{ height: `${100 / data.num}%` }"><div v-if="item.text != 0">{{ item.text }}</div></div></section>
</div>

js部分

let data=reactive({dateArr:[],num:null
})onMounted(()=>{getCanlendar()
})const getCanlendar=()=>{const startDay = new Date(2023,11,1).getDay()const lastDay = new Date(new Date(2023,12).setDate(0)).getDate()const allDay = Math.ceil((lastDay + startDay) / 7) * 7data.dateArr = []data.num = Math.ceil((lastDay + startDay) / 7)for (let i = 1; i <= allDay; i++) {data.dateArr.push({text: (i - startDay) >= 1 && (i - startDay) <= lastDay ? i - startDay : 0,key: i})}
}

scss部分

.calendar{width:700px;height:500px;header{display:flex;width:100%;height:30px;span{width:14.2%;height:30px;line-height:30px;text-align:center;}}section{height:calc(100% - 30px);>div{display:inline-black;width:14.2%;div{height:100%;text-align:center;}}}
}

【ps:以上代码未经过测试，如有错误，请自己改正。】

这篇关于JS：绘制日历，结合vue3食用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---