微信小程序日历

index.wxml

<view class="calendar">
    <view class="calendar-weeks">
      <view>日</view>
      <view>一</view>
      <view>二</view>
      <view>三</view>
      <view>四</view>
      <view>五</view>
      <view>六</view>
    </view>
    <view class="calendar-days">
      <view wx:for="{{ days }}" class="{{ item.currmonth ? 'currmonth' : '' }}" id="{{ item.today ? 'today' : ''}}">{{ item.day }}</view>
    </view>
</view>

index.js

Page({
  data: {
    days: []
  },
  onLoad: function(){
    let date = new Date()
    let curYear = date.getFullYear()
    let curMonth = date.getMonth()
    //获取当前月份天数
    let curDays = new Date(curYear, curMonth + 1, 0).getDate()
    //获取上个月天数
    let preDays = new Date(curYear, curMonth, 0).getDate()
    //这个月第一天星期几
    let monWeek = new Date(curYear, curMonth, 1).getDay()
    //这个月最后一天星期几
    let lastWeek = new Date(curYear, curMonth + 1, 0).getDay()
    let toDay = date.getDate()
    let allDays = []
    for(let i = 0; i < monWeek; i++, preDays--){
      let obj = {currmonth: false, day: preDays}
      allDays.unshift(obj)
    }
    for(let i = 1; i <= curDays; i++){
      let obj = {currmonth: true, day: i}
      if(i == toDay){
        obj['today'] = true
      }
      allDays.push(obj)
    }
    for(let i = 1; i < 7 - lastWeek; i++){
      let obj = {currmonth: false, day: i}
      allDays.push(obj)
    }
    this.setData({days: allDays})
  }
});

index.wxss

.calendar {
  display: flex;
  flex-flow: column nowrap;
}
.calendar-weeks {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.calendar-weeks view {
  box-sizing: border-box;
   14.28%;
  padding: 5%;
  display: flex;
  justify-content: center;
}
.calendar-days {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.calendar-days view {
  box-sizing: border-box;
   14.28%;
  padding: 5%;
  display: flex;
  justify-content: center;
}
.calendar-days view:not(.currmonth) {
  color: #ccc;
}
#today {
  color: #AFEEEE;
}

效果如下图