1 <view class=\'wrap\'>
 2     <view>
 3         <view class=\'date-show\'>
 4             <view class=\'lt-arrow\' bindtap=\'lastMonth\'>
 5                 <image src=\'/images/left_arrow.png\' mode=\'aspectFit\'></image>
 6             </view>
 7             {{year}}年{{month}}月
 8             <view class=\'rt-arrow\' bindtap=\'nextMonth\'>
 9                 <image src=\'/images/right_arrow.png\' mode=\'aspectFit\'></image>
10             </view>
11         </view>
12     </view>
13     <view class=\'header\'>
14         <view wx:for=\'{{date}}\' class=\'{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}\'>{{item}}<view></view></view>
15     </view>
16     <view class=\'date-box\'>
17         <view wx:for=\'{{dateArr}}\' class=\'{{isToday == item.isToday ? "nowDay" : ""}}\' data-date=\'{{item.isToday}}\'>            
18             <view class=\'date-head\'>
19                 <view>{{item.dateNum}}</view>
20             </view>
21             <!-- <view class=\'date-weight\'>{{item.weight}}</view> -->
22         </view>
23     </view>
24 </view>

 1 Page({
 2   data: {
 3     year: 0,
 4     month: 0,
 5     date: [\'日\', \'一\', \'二\', \'三\', \'四\', \'五\', \'六\'],
 6     dateArr: [],
 7     isToday: 0,
 8     isTodayWeek: false,
 9     todayIndex: 0
10   },
11   onLoad: function () {
12     let now = new Date();
13     let year = now.getFullYear();
14     let month = now.getMonth() + 1;
15     this.dateInit();
16     this.setData({
17       year: year,
18       month: month,
19       isToday: \'\' + year + month + now.getDate()
20     })
21   },
22   dateInit: function (setYear, setMonth) {
23     //全部时间的月份都是按0~11基准，显示月份才+1
24     let dateArr = [];                        //需要遍历的日历数组数据
25     let arrLen = 0;                            //dateArr的数组长度
26     let now = setYear ? new Date(setYear, setMonth) : new Date();
27     let year = setYear || now.getFullYear();
28     let nextYear = 0;
29     let month = setMonth || now.getMonth();                    //没有+1方便后面计算当月总天数
30     let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
31     let startWeek = new Date(year + \',\' + (month + 1) + \',\' + 1).getDay();                            //目标月1号对应的星期
32     let dayNums = new Date(year, nextMonth, 0).getDate();                //获取目标月有多少天
33     let obj = {};
34     let num = 0;
35 
36     if (month + 1 > 11) {
37       nextYear = year + 1;
38       dayNums = new Date(nextYear, nextMonth, 0).getDate();
39     }
40     arrLen = startWeek + dayNums;
41     for (let i = 0; i < arrLen; i++) {
42       if (i >= startWeek) {
43         num = i - startWeek + 1;
44         obj = {
45           isToday: \'\' + year + (month + 1) + num,
46           dateNum: num,
47           weight: 5
48         }
49       } else {
50         obj = {};
51       }
52       dateArr[i] = obj;
53     }
54     this.setData({
55       dateArr: dateArr
56     })
57 
58     let nowDate = new Date();
59     let nowYear = nowDate.getFullYear();
60     let nowMonth = nowDate.getMonth() + 1;
61     let nowWeek = nowDate.getDay();
62     let getYear = setYear || nowYear;
63     let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
64 
65     if (nowYear == getYear && nowMonth == getMonth) {
66       this.setData({
67         isTodayWeek: true,
68         todayIndex: nowWeek
69       })
70     } else {
71       this.setData({
72         isTodayWeek: false,
73         todayIndex: -1
74       })
75     }
76   },
77   lastMonth: function () {
78     //全部时间的月份都是按0~11基准，显示月份才+1
79     let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
80     let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
81     this.setData({
82       year: year,
83       month: (month + 1)
84     })
85     this.dateInit(year, month);
86   },
87   nextMonth: function () {
88     //全部时间的月份都是按0~11基准，显示月份才+1
89     let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
90     let month = this.data.month > 11 ? 0 : this.data.month;
91     this.setData({
92       year: year,
93       month: (month + 1)
94     })
95     this.dateInit(year, month);
96   }
97 })

  1 .date-show{
  2     position: relative;
  3     width: 250rpx;
  4     font-family: PingFang-SC-Regular;
  5     font-size: 40rpx;
  6     color: #282828;
  7     text-align: center;
  8     margin: 59rpx auto 10rpx;
  9 }
 10 .lt-arrow,.rt-arrow{
 11     position: absolute;
 12     top: 1rpx;
 13     width: 60rpx;
 14     height: 60rpx;
 15   padding-right: 0.6rem;
 16 }
 17 .lt-arrow image,.rt-arrow image{
 18     width: 40rpx;
 19     height: 40rpx;
 20 }
 21 .lt-arrow{
 22     left: -110rpx;
 23     /* transform: rotate(180deg); */
 24 }
 25 .rt-arrow{
 26     right: -100rpx;
 27 }
 28 .header{
 29     font-size: 0;
 30     padding: 0 24rpx;
 31 }
 32 .header>view{
 33     display: inline-block;
 34     width: 14.285%;
 35     color: #333;
 36     font-size: 30rpx;
 37     text-align: center;
 38     border-bottom: 1px solid #D0D0D0;
 39     padding: 39rpx 0;
 40 }
 41 .weekMark{
 42     position: relative;
 43 }
 44 .weekMark view{
 45     position: absolute;
 46     bottom: 0;
 47     left: 0;
 48     width: 100%;
 49     border-bottom: 1px solid #22A7F6;
 50 }
 51 .date-box{
 52     font-size: 0;
 53     padding: 10rpx 0;
 54 }
 55 .date-box>view{
 56     position: relative;
 57     display: inline-block;
 58     width: 14.285%;
 59     color: #020202;
 60     font-size: 40rpx;
 61     text-align: center;
 62     vertical-align: middle;
 63     margin: 15rpx 0;
 64 }
 65 .date-head{
 66     height: 60rpx;
 67     line-height: 60rpx;
 68     font-size: 26rpx;
 69 }
 70 .nowDay .date-head{
 71     width: 60rpx;
 72     border-radius: 50%;
 73     text-align: center;
 74     color: #fff;
 75     background-color: #22A7F6;
 76     margin: 0 auto;
 77 }
 78 .date-weight{
 79     font-size: 22rpx;
 80     padding: 15rpx 0;
 81 }
 82 .nowDay .date-weight{
 83     color: #22A7F6;
 84 }
 85 .one{
 86     position: absolute;
 87     bottom: 0;
 88     right: 5rpx;
 89     width: 20rpx;
 90     height: 20rpx;
 91     border-radius: 50%;
 92     background-color: red;
 93 }
 94 .two{
 95     position: absolute;
 96     bottom: 30rpx;
 97     right: 5rpx;
 98     width: 20rpx;
 99     height: 20rpx;
100     border-radius: 50%;
101     background-color: blue;
102 }