Calendar小程序日历代码摘要

js

 data: {
    year: '',
    month: '',
    day: '',
    weekArr: ['日', '一', '二', '三', '四', '五', '六'],
    dateArr: [],
    firstDay: '',
    lastDay: '',
    param: null,
    months:''
  },
/*获取当天*/
  getDates: function () {
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth();
    var months = month + 1;
    this.data.year = year;
    this.data.month = months;
    this.data.day = mydate.getDate();
    var fist = new Date(year, month, 1);
    this.data.firstDay = fist.getDay();
    var last = new Date(year, months, 0);
    this.data.lastDay = last.getDate();
  
    this.setData({
      year: this.data.year,
      month: this.data.month,
      day: this.data.day,
      firstDay: this.data.firstDay,
      lastDay: this.data.lastDay,
      months: this.data.month
    })
    console.log("今天：" + this.data.day, this.data.firstDay, this.data.lastDay, this.data.month);
    wx.setStorageSync('dayMonth', this.data.month)
    console.log(this.data.month, this.data.months,'getDate')
  },
  setDate: function () {
    for (var i = 1; i < this.data.lastDay + 1; i++) {
      this.data.dateArr.push(i);
    }
    console.log(this.data.dateArr)
    this.setData({
      dateArr: this.data.dateArr,
      firstDay: this.data.firstDay
    })
  },
  /*上一月*/
  prevMonth: function () { 
    var months = "";
    var years = "";
    if (this.data.month == 1) {
      years = this.data.year - 1
      this.data.month = 12;
      months = this.data.month;
    } else {
      years = this.data.year;
      months = this.data.month - 1;
    }

    var first = new Date(years, months - 1, 1);
    this.data.firstDay = first.getDay();
    var last = new Date(years, months, 0);
    this.data.lastDay = last.getDate();
    this.setData({
      months: wx.getStorageSync('dayMonth'),
      month: months,
      year: years,
      firstDay: this.data.firstDay,
      lastDay: this.data.lastDay
    })

    this.data.dateArr = [];
    for (var i = 1; i < this.data.lastDay + 1; i++) {
      this.data.dateArr.push(i);
    }
    this.setData({
      dateArr: this.data.dateArr
    })
  },
  /*下一月*/
  nextMonth: function () { 
    var months = "";
    var years = "";
    if (this.data.month == 12) {
      this.data.month = 0;
      months = this.data.month;
      years = this.data.year + 1;
    } else {
      months = this.data.month + 1;
      years = this.data.year;
    }
    var months = this.data.month + 1;
    var first = new Date(years, months - 1, 1);
    this.data.firstDay = first.getDay();
    var last = new Date(years, months, 0);
    this.data.lastDay = last.getDate();
    this.setData({
      months: wx.getStorageSync('dayMonth'),
      month: months,
      year: years,
      firstDay: this.data.firstDay,
      lastDay: this.data.lastDay
    })

    this.data.dateArr = [];
    for (var i = 1; i < this.data.lastDay + 1; i++) {
      this.data.dateArr.push(i);
    }
    this.setData({
      dateArr: this.data.dateArr
    })
  },

css

.calendar_header {
  display: flex;
  height: 100rpx;
  line-height: 100rpx;
  background: #fff;
  text-align: center;
}

.calendar_header .prev image {
  width: 14rpx;
  height: 26rpx;
}

.calendar_header .next image {
  width: 14rpx;
  height: 26rpx;
}

.calendar_header .yearMoth {
  margin-left: 30rpx;
  margin-right: 30rpx;
  color: #333;
}

.calendar_header .signIn_Day {
  width: 33%;
  font-size: 28rpx;
  color: #666;
}

.calendar_header .signIn_DayRight {
  display: flex;
  width: 33%;
  justify-content: center;
}

.calendar {
  box-shadow: 0px 0px 2px 0px rgba(0, 122, 255, 0.1);
  box-shadow: 0px 0px 2px 0px rgba(0, 122, 255, 0.1);
}
.calendar_main .date {
  width: 100%;
  text-align: center;
  padding-left: 3.8%;
}

.calendar_main .week view {
  width: 13.2%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #999;
}

.blue {
  background: #007aff;
  color: #fff;
  border-radius: 50%;
}

.white {
  background: white;
}
 .signIn_Day {
  width: 33%;
  font-size: 28rpx;
  color: #666;
}
.signIn_DayRight {
  display: flex;
  width: 33%;
  justify-content: center;
}
.week {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 3.8%;
}

.date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

Html

<view class="calendar">
    <view class="calendar_header">
      <view class="signIn_Day">共签到21天</view>
      <view class="signIn_DayRight">
        <view class="prev" bindtap="prevMonth">
          <image src="/pages/images/backLeft.png"></image>
        </view>
        <view class="yearMoth">{{year}}年{{month}}月</view>
        <view class="next" bindtap="nextMonth">
          <image src="/pages/images/backRight.png"></image>
        </view>
      </view>
    </view>
    <view class="calendar_main">
      <view class="calendar">
        <view class="week">
          <view wx:for="{{weekArr}}" wx:for-index="index" wx:for-item="item" wx:key="key">{{item}}</view>
        </view>
        <view class="date">
          <block wx:for="{{dateArr}}" wx:for-index="index" wx:for-item="item" wx:key="key">
            <view style="{{index ==0?'margin-left:'+ 13.2 *firstDay +'%;':''}}width:13.2%;height:100rpx;line-height:100rpx;color:#333;">
              <view class="day {{day== item && month ==months ? 'blue':'white'}}">{{item}}</view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>

效果图