日历代码（微信小程序）

wxml代码：`

<!--wxml-->
<!--日历，记录女性月经周期-->
<view class="calendar">

<!--年份和月份-->
<view class="flex calendar-choose">

<!--图标-->
<view class="previcon" bindtap="changeMonth">
<image src="../../images/small.png"></image>
</view>

<!--显示月份-->
<view class="mouth-picker">
<view class="month">{{cur_month}}月</view>
</view>

<!--显示年份-->
<view class="year-picker">
<view class="year">{{cur_year}}年</view>
</view>

<!--图标-->
<view class="nexticon" bindtap="changeYear">
<image src="../../images/big.png" ></image>
</view>

</view>

<view class="flex week-list">
<view class="week-itm" wx:for="{{weeklist}}">{{item}}</view>
</view>

<view class="flex days-list">
<view class="day lm" wx:for="{{lastMonthDaysList}}" data-handle="prev">
<text>{{item}}</text>
</view>
<block  wx:for="{{currentMonthDaysList}}">
<view class="day">
<text>{{item}}</text>
</view>
</block>
<view class="day nm" wx:for="{{nextMonthDaysList}}" data-handle="next" >
<text>{{item}}</text>
</view>
</view>

</view>

wxss代码：

.calendar{
  width:100%;
  height:300rpx;
  }

.calendar-choose{
  height:100rpx;
  line-height:100rpx;
  background:#fefefe;
  padding:0 30rpx;
  font-size:34rpx;
  color:#353535;
  border-bottom: 1rpx solid #e5e5e5;
  display:flex;
  justify-content:space-between;
}

.calendar .previcon, .calendar .nexticon{
  width:20%;
  height:40%;
  margin-top:12rpx;
}

.previcon image, .nexticon image {
  width:100%;
  height:100%;
}

.calendar .mouth-picker{
  width:600rpx;
  text-align: center;
  }

.calendar .year-picker{
  width:600rpx;
  text-align: center;
  }

.calendar .week-list
{
  width:100%;
  height:70rpx;
  background:#b9c4c9;
  display:flex;
  justify-content:space-around;
}

.calendar .week-itm{
  font-size:30rpx;
  color:white;
  width:14.28%;
  height:100%;
  padding-left:43rpx;
  padding-top:15rpx;
}

.calendar .days-list{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}

.day{
  width: 14%;
  height:60rpx;
  border-right:1rpx solid #e5e5e5;
  border-bottom:1rpx solid #e5e5e5;
  color:#333;
  position: relative;
  text-align: center;
  line-height: 60rpx;
  }

.calendar .days-list .lm,.calendar .days-list .nm{
  color:#b6b6b6;
  }

.calendar .day .ep{
  color:#333;
  }

js代码：

Page({
  data: {
    cur_month: 0,
    cur_year: 0,
    weeklist: ['日', '一', '二', '三', '四', '五', '六']      
  },                 
   

  onLoad: function (options) {
    var cur_year = new Date().getFullYear();   //获取当前年
    var cur_month = new Date().getMonth();    //获取当前月

    this.setData({
      cur_year: cur_year,
      cur_month: cur_month + 1
    });

    this.calendar(cur_year, cur_month + 1);

  },
  //页面相关事件处理函数--监听用户下拉动作

  onPullDownRefresh: function () {

  },

  /**
   页面上拉触底事件的处理函数
   **/
  onReachBottom: function () {

  },

  /*
   用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '简单日历实现小程序版本',
      desc: '简单日历实现小程序版本',
      path: '/pages/index/index'
    };
  },

  calendar: function(year, month) {
    var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    /**
     * 本月天数
     */
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
      days[1] = 29;
      }

    var day = days[month - 1];

    /**
     * 本月第一天星期几
     */
    var myDate = new Date(year, month - 1, 1);
    var weektime = myDate.getDay();

    /**
     * 上个月的天数
     */
    if(month == 1) {
      var prevyear = year - 1;
      var prevmonth = 12;
      var prevday = 31;
    } else {
      prevmonth = month - 1;
      prevday = days[prevmonth - 1];
    }

    /**
     * 下个月的天数
     */
    if(month == 12) {
      var nextyear = year + 1;
      var nextmonth = 1;
      var nextday = 31;
    } else {
      nextmonth = month + 1;
      nextday = days[nextmonth - 1];
    }

    /**
     * 日历上第一个数字
     */
    if(weektime == 0) {
      var firstnumber = 1;
    } else {
      firstnumber = prevday - weektime + 1;
    }

    /**
     * 日历上最后一个数字
     */
    if(firstnumber == 1) {
      var lastnumber = 7 - (day % 7);
    } else {
      if ((prevday - firstnumber + 1 + day) % 7 == 0) {
        lastnumber = day;
      } else {
        var remainder = (prevday - firstnumber + 1 + day) % 7;
        lastnumber = 7 - remainder;
      }
    }

    var lastMonthDaysList = [];
    var currentMonthDaysList = [];
    var nextMonthDaysList = [];

    if(firstnumber == 1) {
      lastMonthDaysList = [];
    } else{
      for(var i = firstnumber; i <= prevday; i++) {
        lastMonthDaysList.push(i);
      }
    }

    for(var i = 1; i <= day; i++) {
      currentMonthDaysList.push(i);
    }

    if(lastnumber == day) {
      nextMonthDaysList = [];
    } else {
      for(var i = 1; i <= lastnumber; i++) {
        nextMonthDaysList.push(i);
      }
    }

    this.setData({
      lastMonthDaysList: lastMonthDaysList,
      currentMonthDaysList: currentMonthDaysList,
      nextMonthDaysList: nextMonthDaysList
    })
  },

  changeMonth: function(e) {
    var cur_year = this.data.cur_year;

    if(this.data.cur_month == 1) {
      var cur_month = 12;
      cur_year = cur_year - 1;
    } else {
      cur_month = this.data.cur_month - 1;
    }
    
    this.setData({
      cur_year: cur_year,
      cur_month: cur_month
    });

    //console.log('cur_year', cur_year);
    //console.log('cur_month', cur_month);

    this.calendar(cur_year, cur_month);
  },

  changeYear: function(e) {
    var cur_year = this.data.cur_year - 1;
    var cur_month = this.data.cur_month;

    this.setData({
      cur_year: cur_year,
      cur_month: cur_month
    })

    this.calendar(cur_year, cur_month);
   
  }

})

效果图：

（有在网上参考别人的代码，写的不好，欢迎交流。）