项目开发中应用的一个小日历功能，写的时候挺复杂但是写出来整理还是觉得挺简单的，整理完以后没有在实际页面中去跑，有问题大家留言或者自己解决(本人样式布局巨好看希望大家喜欢芜湖~)！
html
<view class="ban-all"><view class="date_week"><image class="left" src="../../images/left1.png" bindtap="leftime" style="margin-left: 25rpx;"></image><view class="date">{{year}}年{{month}}月</view><image class="right" src="../../images/right1.png" bindtap="rightime"></image></view><view class="calendar"><view class="calendar-weeks"><view style="color: rgba(234, 128, 87, 1);">日</view><view>一</view><view>二</view><view>三</view><view>四</view><view>五</view><view style="color: rgba(234, 128, 87, 1);">六</view></view><view class="calendar-days"><view wx:for="{{ lineflag?dayf:days }}" class="{{ item.currmonth ? 'currmonth1' : '' }}"><view data-id="{{item.date}}" bindtap="getdaylist" class="{{ item.currmonth ? 'currmonth' : '' }}">{{ item.day }}</view><!-- 小圆点的添加 --><!-- <view wx:if="{{item.show}}" class="one"></view> --></view><view style="width: 670rpx;height: 36rpx;" bindtap="chanline"><image src="{{lineflag?'../../images/morebot.png':'../../images/moretop.png'}}"style="width: 28rpx;height: 36rpx;margin-top: -20rpx;"></image></view></view></view></view>
css
Page({/*** 页面的初始数据*/data: {day: [], //日历years: '',lineflag: true},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {this.calendar()this.getDays(this.data.y, this.data.m)},// 传参// 日期加传参calendar() {let now = new Date();let y = now.getFullYear()let m = now.getMonth()this.setData({y,m,})},// 日历getDays(ye, mo) {let that = thislet date = new Date(ye, mo)const y = date.getFullYear()const m = date.getMonth()let curYear = ylet curMonth = m//获取当前月份天数let curDays = new Date(curYear, curMonth + 1, 0).getDate()//获取上个月天数let preDays = new Date(curYear, curMonth, 0).getDate()//这个月第一天星期几let monWeek = new Date(curYear, curMonth, 1).getDay()//这个月最后一天星期几let lastWeek = new Date(curYear, curMonth + 1, 0).getDay()let allDays = []// 上个月let mgo = mlet mmgo = mgo < 10 ? ('0' + mgo) : mgo;for (let i = 0; i < monWeek; i++, preDays--) {let obj = {currmonth: false,day: preDays,date: y + '-' + mmgo + '-' + `${preDays < 10 ? ('0' + preDays) : preDays}`}allDays.unshift(obj)}// 这个月let mone = m + 1let mm = mone < 10 ? ('0' + mone) : mone;for (let i = 1; i <= curDays; i++) {let obj = {currmonth: false,day: i,date: y + '-' + mm + '-' + `${i < 10 ? ('0' + i) : i}`}// if (i == toDay) {// obj['today'] = true// }allDays.push(obj)}// 下个月let mdo = m + 2let mmdo = mdo < 10 ? ('0' + mdo) : mdo;for (let i = 1; i < 7 - lastWeek; i++) {let obj = {currmonth: false,day: i,date: y + '-' + mmdo + '-' + `${i < 10 ? ('0' + i) : i}`}allDays.push(obj)}that.setData({days: allDays,dayf: allDays.slice(0,14),year: y,month: m + 1,})// 想设置日期下方的小圆点可以在这边循环allDays添加一个控制小圆点的true false，我加的key是show},// 上个月leftime() {this.setData({m: this.data.m - 1})this.getDays(this.data.y, this.data.m)},// 下个月rightime() {this.setData({m: this.data.m + 1})this.getDays(this.data.y, this.data.m)},//获取当天 getdaylist(e) {let that = thisif (that.data.lineflag) {that.data.days.forEach((item, index) => {let b = "days[" + index + "].currmonth"that.setData({[b]: false})})that.data.dayf.forEach((item, index) => {let b = "dayf[" + index + "].currmonth"that.setData({[b]: false})if (item.date == e.currentTarget.dataset.id) {let a = "dayf[" + index + "].currmonth"that.setData({[a]: true,})}})} else {that.data.dayf.forEach((item, index) => {let b = "dayf[" + index + "].currmonth"that.setData({[b]: false})})that.data.days.forEach((item, index) => {let b = "days[" + index + "].currmonth"that.setData({[b]: false})if (item.date == e.currentTarget.dataset.id) {let a = "days[" + index + "].currmonth"that.setData({[a]: true,})}})}},// 改变行数chanline(){this.setData({lineflag:!this.data.lineflag})},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}})
css
/* pagesStudy/Tobecompleted/Tobecompleted.wxss */page {background: rgba(249.9, 249.9, 249.9, 1);}.ban-all{width: 670rpx;margin: 20rpx auto;border-radius: 16rpx;background: rgba(255, 255, 255, 1);box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(144, 144, 144, 0.1);}.calendar {width: 670rpx;margin: 20rpx auto;display: flex;flex-flow: column nowrap;}.calendar-weeks {display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;}.calendar-weeks view {box-sizing: border-box;width: 14.28%;padding: 5%;display: flex;justify-content: center;font-size: 28rpx;font-weight: 500;color: rgba(53, 59, 80, 1);}.calendar-days {display: flex;flex-flow: row wrap;justify-content: space-between;align-items: center;}.calendar-days view {box-sizing: border-box;width: 14.28%;padding: 4%;display: flex;justify-content: center;font-size: 28rpx;font-weight: 500;}.calendar-days view:not(.currmonth) {color: rgba(21, 35, 46, 1);}.currmonth1 {background: rgba(31, 104, 194, 1);color: rgba(255, 255, 255, 1);border-radius: 25rpx;height: 50rpx;text-align: center;line-height: 5rpx;width: 80%;}.currmonth {color: rgba(255, 255, 255, 1);}.date_week {width: 670rpx;margin: 20rpx auto;height: 86rpx;border-bottom: 1rpx solid rgba(247, 247, 247, 1);display: flex;align-items: center;color: rgba(21, 35, 46, 1);font-size: 32rpx;line-height: 32rpx;}.date_week .date {font-size: 32rpx;font-weight: 600;color: rgba(21, 35, 46, 1);}.right {width: 28rpx;height: 28rpx;}.left {width: 28rpx;height: 28rpx;}/* 小圆点样式 *//* .one {background: rgba(31, 104, 194, 1);width: 8rpx;height: 8rpx;border-radius: 50%;position: relative;top: 54rpx;left: -8rpx;} */
