小程序日历

时间捉急，先写一个简单的用着，过几天写个插件

wxml

<view class="canlendarBgView">
  <view class="canlendarView">
    <view class="canlendarTopView">
      <view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
        <view class="leftView"></view>
      </view>
      <view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
      <view class="rightBgView" bindtap="handleCalendar" data-handle="next">
        <view class="rightView"></view>
      </view>
    </view>
    <view class="weekBgView">
      <view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
    </view>
    <view class="dateBgView">
      <view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
      </view>
      <view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
        <view class="datesView {{index == todayIndex ? 'dateSelectView' : index == nowTodayIndex?'orange':''}}">{{item.name}}</view>
        <view class='spot' wx:if='{{item.spot}}'></view>
      </view>
    </view>
  </view>
</view>

wxss

.canlendarBgView {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.canlendarView {
  color: #6666CC;
  display: flex;
  flex-direction: column;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 6px rgba(0,0,0,0.16);
  opacity:1;
  border-radius:0px 0px 5px 5px;
  padding-bottom: 32rpx;
}

.canlendarTopView {
  height: 124rpx;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #2F2F2F;
}

.leftBgView {
  text-align: right;
  height: 80rpx;
  display: flex;
  flex-direction: row-reverse;
}
.leftBgView,.rightBgView {
  width: 80rpx;
  height: 100%;
}
.leftView {
  width: 18rpx;
  height: 20rpx;
  border-top: 2rpx solid #666666;
  border-right: 2rpx solid #666666;
  transform: rotate(-135deg);
  margin-top: 54rpx;
}

.centerView {
  width: 50%;
  height: 80rpx;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.rightView {
  width: 18rpx;
  height: 20rpx;
  border-top: 2rpx solid #666666;
  border-right: 2rpx solid #666666;
  transform: rotate(45deg);
  margin-top: 54rpx;
}

.weekBgView {
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 8%;
  padding-right: 8%;
  background-color: rgba(255,172,48,0.16);
  color: #FFAC30;
  font-size: 28rpx;
  margin-bottom: 46rpx;
}

.weekView {
  flex-grow: 1;
  text-align: center;
  font-size: 28rpx;
}

.dateBgView {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 7.7%;
  padding-right: 7.2%;
}

.dateEmptyView {
  width: 14.2%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dateView {
  width: 14.2%;
  color: #fff;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  margin-bottom: 20rpx;
}

.datesView {
  width: 60rpx;
  height: 60rpx;
  color: #444444;
  font-size: 28rpx;
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.spot {
  left: 46%;
  bottom: 5rpx;
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
  margin: 0 auto;
  text-align: center;
  background-color: red;
  position: absolute;
}
.dateSelectView {
  border-radius: 50%;
  position: relative;
  left: 0;
  top: 0;
  color: #fff;
  background-color: #FFAC30;
}
.orange {
  color: #FFAC30;
}
.noClass {
  font-size: 30rpx;
  color: #666;
  text-align: center;
}
.noClass image{
  width: 200rpx;
  height: 164rpx;
  margin: 110rpx auto 48rpx auto;
}
.list {
  width: 90%;
  margin: 20rpx auto auto auto;
  background-color: #FFF;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border-radius: 20rpx;
  color: #666;
}
.list>.top {
  border-bottom: solid 2rpx #F3F3F3;
  height: 62rpx;
  line-height: 62rpx;
  display: flex;
  justify-content: space-between;
}
.list>.top>.time {
  color: #6E6E6E;
}
.list>.top view text {
  color: #FFAC30;
}
.bottom>view {
  display: flex;
  justify-content: space-between;
  height: 66rpx;
  line-height: 66rpx;
}
.bottom>view>.className {
  color: #444444;
  font-size: 28rpx;
}
.bottom .childrenName {
  color: #999;
  font-size: 26rpx;
}

js

const App = getApp();
import Path from "../../etc/config.js";

Page({

  /**
   * 页面的初始数据
   */
  data: {
    picAddress: Path.picAddress+'homePageSearch/',
    hasEmptyGrid: false,
    cur_year: '',
    cur_month: '',
    clickToday: '',
    daysArr: [1,2,3]
  },
  onLoad(options) {
    this.setNowDate();
    const date = new Date();
    const cur_year = date.getFullYear();
    this.setData({
      nowTodayIndex: date.getDate() - 1,
      clickToday: date.getDate() -1
    })
    this.spotShow()
  },

  // 点击当前日期
  dateSelectAction: function (e) {
    let month = this.data.cur_month
    if (month<10) {
      month = '0'+month
    }
    let day = cur_day+1
    if (day<10) {
      day = '0'+day
    }
    let year = this.data.cur_year
    var cur_day = e.currentTarget.dataset.idx;
    this.setData({
      todayIndex: cur_day,
      clickToday: cur_day,
      clickMonth: month,
      clickYear: year
    })
    console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
  },

  // 课程列表
  getMySchedule: function (scheduleDate) {
    let that = this;
    wx.request({
      url: Path.basePath+'event/onlineClass/course/get-my-schedule-ajax',
      header: {
        'token': wx.getStorageSync('token'),
        'content-type': 'application/json'
      },
      method: "POST",
      data:{
        scheduleDate: scheduleDate
      },
      success (res) {
        console.log(res);
        if (res.statusCode === 200) {
          if (res.data.errorCode == 710000) {
            var data = res.data.data.list;
            that.setData({
              list: data
            })
            console.log(data)
          }
        }else {
          App.showModal(res.data.msg);
        }
        wx.hideLoading();
      }
    });
  },

  setNowDate: function () {
    const date = new Date();
    const cur_year = date.getFullYear();
    const cur_month = date.getMonth() + 1;
    const now_year = date.getFullYear();
    const now_month = date.getMonth() + 1;
    const todayIndex = date.getDate() - 1;
    const now_day = date.getDate() - 1;
    console.log(`日期：${todayIndex}`)
    const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
    this.calculateEmptyGrids(cur_year, cur_month);
    this.calculateDays(cur_year, cur_month);
    this.setData({
      cur_year: cur_year,
      cur_month: cur_month,
      now_year: now_year,
      now_month: now_month,
      now_day: now_day,
      clickMonth: now_month,
      clickYear: now_year,
      weeks_ch,
      todayIndex,
    })
  },

  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
  },
  getFirstDayOfWeek(year, month) {
    return new Date(Date.UTC(year, month - 1, 1)).getDay();
  },
  calculateEmptyGrids(year, month) {
    const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
    let empytGrids = [];
    if (firstDayOfWeek > 0) {
      for (let i = 0; i < firstDayOfWeek; i++) {
        empytGrids.push(i);
      }
      this.setData({
        hasEmptyGrid: true,
        empytGrids
      });
    } else {
      this.setData({
        hasEmptyGrid: false,
        empytGrids: []
      });
    }
  },

  // 展示日期
  calculateDays(year, month) {
    let days = [];
    let daysObj = {};
    const thisMonthDays = this.getThisMonthDays(year, month);
    let daysArr = this.data.daysArr
    for (let i = 1; i <= thisMonthDays; i++) {
      daysObj = { name: i, spot: false };
      days.push(daysObj);
    }
    this.setData({
      days
    });
  },

  // 控制有课的点点的显示
  spotShow: function () {
    let days = [];
    let daysObj = {};
    const thisMonthDays = this.getThisMonthDays(this.data.cur_year,this.data.cur_month);
    let daysArr = this.data.daysArr
    for (let i = 1; i <= thisMonthDays; i++) {
      daysObj = { name: i, spot: false };
      for (let v in daysArr) {
        if (daysArr[v] == i) {
          daysObj = { name: i, spot: true };
        }
      }
      days.push(daysObj);
    }
    this.setData({
      days
    });
  },


  // 点击上下个月
  handleCalendar(e) {
    const date = new Date();
    const handle = e.currentTarget.dataset.handle;
    const cur_year = this.data.cur_year;
    const cur_month = this.data.cur_month;
    if (handle === 'prev') {
      let newMonth = cur_month - 1;
      let newYear = cur_year;
      if (this.data.now_month == newMonth && this.data.now_year == newYear) {
        this.setData({
          nowTodayIndex: date.getDate() - 1
        })
      } else {
        this.setData({
          nowTodayIndex: 100
        })
      }
      // 显示选中的日期
      if (this.data.clickMonth == newMonth && this.data.clickYear == newYear) {
        this.setData({
          todayIndex: this.data.clickToday,
        })
      } else {
        this.setData({
          todayIndex:100,
        })
      }

      if (newMonth < 1) {
        newYear = cur_year - 1;
        newMonth = 12;
      }

      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);

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

    } else {
      let newMonth = cur_month + 1;
      let newYear = cur_year;
      if (this.data.now_month == newMonth && this.data.now_year == newYear) {
        this.setData({
          nowTodayIndex: date.getDate() - 1
        })
      } else {
        this.setData({
          nowTodayIndex: 100
        })
      }
      // 显示选中的日期
      if (this.data.clickMonth == newMonth && this.data.clickYear == newYear) {
        this.setData({
          todayIndex: this.data.clickToday,
        })
      } else {
        this.setData({
          todayIndex:100,
        })
      }
      if (newMonth > 12) {
        newYear = cur_year + 1;
        newMonth = 1;
      }

      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);

      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      })
    }
    this.spotShow()
  }

})