日历的制作

1． 获取当月天数

var currentDay = new Date();
var year = currentDay.getFullYear();
var month = currentDay.getMonth() + 1;
 //当月天数
var MonthDays = new Date(year, month, 0).getDate();

2． 获取当月第一天是周几

    var firstObj = new Date();
    firstObj.setFullYear(year);
    firstObj.setMonth(month - 1);
    firstObj.setDate(1);
    //第一天周几
    var firstDay = firstObj.getDay() <= 0 ? 7 + firstObj.getDay() : firstObj.getDay()

3． 布置数据

    var DayList = [];
    var f = 0;
    for (var i = 0; i < MonthDays + firstDay % 7; i++) {
      if (i < firstDay % 7) {
//这种算法的日期分别是日、一、二、三、四、五、六
//如果想从星期一开始显示的话，i<firstDay-1
        DayList[i] = '';
      } else {
        DayList[i] = f + 1;
        f = DayList[i]
      }
}
this.setData({
      currentMonthDay: DayList,
      ColorList: ColorList
    })

4． 在xml文件中绑定数据

<view class='page'>
  <view class='block'>
    <view class='item' wx:for='{{currentMonthDay}}' wx:for-item='day'>
      <view wx:if='{{day!=""}}' class='itemday' style='background:{{ColorList[index]}}'>{{day}}</view>
    </view>
  </view>
</view>

5.样式写法

.block {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 14%;
}

.itemday {
  margin: 10rpx;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #000;
}