前言

作为一名前端开发人员，设计师给的UI要实现日历，找了找开源的项目，发现不是样式不符合就是交互不符合，改源码看不懂？头都大，今天就教教大家用200行不到的代码实现精美日历(h5+微信小程序都适用)

效果

思路

以window10系统的日历为例，我们可以看出，一个月份的日历组成总共为7列6行，日期有三个部分组成，1为上月由于该月第一天的周几产生的空白部分，2为本月的所有天数，3，为6x7-(上月空白部分 + 本月天数)

开始写代码

• 计算本月天数

 getDates (d, t = 0) {
 var curDate = new Date(d.replace(/-/g, '/'))
 var curMonth = curDate.getMonth()
 curDate.setMonth(curMonth + t + 1)
 curDate.setDate(0)
 var curDates = new Array(curDate.getDate()).fill(0).map((item, key) => {
 return key + 1
 })
 return curDates
 }

getDates（d）中的参数d为该月的任意一天，方法放回该月有效的所有天数

• 计算该月第一天是星期几

 getWeek (d) {
 var curDate = new Date(d.replace(/-/g, '/'))
 curDate.setDate(1)
 return curDate.getDay()
 }

• 计算该月+前后留白天数

 getFullChunkDates (d) {
 var curDates = this.getDates(d)
 var preDates = this.getDates(d, -1)
 var nexDates = this.getDates(d, 1)
 var curWeek = this.getWeek(d)
 curDates = curDates.map((i, k) => {
 return {
 num: i,
 fullDate: /(^\d{4})-(\d{1,2})-/.exec(d)[0] + i,
 show: 1
 }
 })
 preDates = preDates.map(i => {
 return {
 num: i,
 show: 0
 }
 })
 nexDates = nexDates.map(i => {
 return {
 num: i,
 show: 0
 }
 })
 var preCurDates = preDates.slice(preDates.length - (curWeek === 0 ? 6 : curWeek - 1), preDates.length).concat(curDates)
 return preCurDates.concat(nexDates.slice(0, 42 - preCurDates.length))
 }

• 获取天数用于图层渲染(计算2019-10-16所在月份的日历)

#js--------------------
data () {
 return {
 days: []
 }
}
created () {
 this.days = this.getFullChunkDates('2019-10-16')
}
#html--------------------
<view class="c-day">
 <view class="d-item"
 :key="key" v-for="(item, key) in days">
 <text>{{item.num}}</text>
 </view>
</view>

为了保证渲染不出现胡乱，必须保证.c-day节点下的.d-item为7x6的分布状态

结语

今天教大家如何自己实现日历就完成了，觉得不错就点几下关注和分享呗

《原文发表于本人博客kyeteo.cn》