1.小程序，可折叠签到日期：

imagestyle="height:{{height}}"class='bg'src="{{calendarbg}}"viewstyle="top:{{top}}"catchtap="foldAndUnfold"hidden="{{nowYear!=showYear||nowMonth!=showMonth}}"class='switchbtn'imagesrc="{{arrowurl}}"/image/view/imageviewclass='box'viewclass='showcontentflex'imageclass="icon_qiandao"src="../../images/icon_qiandao_active.png"/imageviewclass="title"viewclass="qiandao"你已累计签到text{{daycount}}天/text/viewviewclass="detail"查看今日积分/view/viewviewhidden="{{!qiandao}}"buttonclass="clickbtn"bindtap="qiandao"今日签到/button/viewviewhidden="{{qiandao}}"buttonclass="clickbtn"已签到/button/view/view/viewviewclass="calendar"viewclass="topdate"wx:if="{{!calendarfold}}"imageclass="topleft"src="../../images/arrow_left.png"bindtap='sign_prev'/imagetext{{nowYear}}-{{nowMonth}}-{{nowDay}}/textimageclass="topright"src="../../images/arrow_right.png"bindtap='sign_next'/image/viewviewclass="calendar-header"viewclass="ch-week"wx:for="{{week}}"wx:key="{{index}}"textclass="ch-item-text"{{item}}/text/view/view!--完整的当月数据--viewclass="calendar-month"wx:if="{{!calendarfold}}"viewclass="calendar-month-week"wx:for="{{weekItemData}}"wx:for-index="weekIndex"wx:for-item="weekItem"wx:key="{{weekIndex}}"viewcatchtap="clickDay"name="day"data-day="{{item}}"class="cm-week-day"wx:for="{{weekItem}}"wx:key="{{index}}"viewwx:if="{{clickYear==showYear&&clickMonth==showMonth&&clickDay==item}}"hidden="{{item0}}"class="cm-week-day-circle"blockwx:if="{{item.sign}}"{{item.sign}}/blockblockwx:else{{item}}/block/viewtextwx:elseclass="{{nowYear==showYear&&nowMonth==showMonth&&nowDay==item?'today':''}}"hidden="{{item0}}"textwx:if="{{item.sign}}"class="signday"{{item.sign}}/textblockwx:else{{item}}/block/text/view/view/view!--本周数据--viewclass="calendar-month-week"wx:elseviewcatchtap="clickDay"data-day="{{item}}"class="cm-week-day"wx:for="{{nowWeekDataItem}}"wx:key="{{index}}"viewwx:if="{{clickYear==showYear&&clickMonth==showMonth&&clickDay==item}}"hidden="{{item0}}"class="cm-week-day-circle"blockwx:if="{{item.sign}}"{{item.sign}}/blockblockwx:else{{item}}/block/viewtextwx:elseclass="{{nowYear==showYear&&nowMonth==showMonth&&nowDay==item?'today':''}}"hidden="{{item0}}"textwx:if="{{item.sign}}"class="signday"{{item.sign}}/textblockwx:else{{item}}/block/text/view/view/viewviewclass="calendar_info"viewclass="title"积分详情/viewviewclass="today"{{newDate}}/viewviewclass="flex_box"blockwx:for="{{inteList}}"wx:key="index"viewclass="flex_list"view{{item.tsci_name}}/viewviewclass="right_text"+{{item.tsci_count}}分/view/view/block/view/view

2.js:

constapp=getApp();Component({/***组件的属性列表*/properties:{},/***组件的初始数据*/data:{qiandao:true,week:["日",'一','二','三','四','五','六'],dateSign:null,//已签到的日期,showYear:null,//当前显示的年showMonth:null,showDay:null,nowYear:null,//当天日期年月日nowMonth:null,nowDay:null,clickDay:null,//选中的日nowWeekData:null,//当前周数据nowWeekDataItem:null,//当前周数据,改变数组以后weekItemData:null,//当前月数据,改变数组以后calendarfold:true,//日历是否折叠top:160+'rpx',height:250+'rpx',calendarbg:'../../images/calendar_bg.png',arrowurl:'../../images/arrow_down.png',},//目前没有用到lifetimes:{attached(){//在组件实例进入页面节点树时执行letthat=this//获取当前年份和月份letnowTime=newDate();letnowYear=nowTime.getFullYear();//年letnowMonth=nowTime.getMonth();//月letnowDay=nowTime.getDate();//日//that.getMonthData(nowYear,nowMonth+1);TODOthat.getajax();that.setData({showYear:nowYear,showMonth:nowMonth+1,showDay:nowDay,nowYear,nowMonth:nowMonth+1,nowDay,clickYear:nowYear,clickMonth:nowMonth+1,clickDay:nowDay,})that.getSignInDate(that.data.nowYear,that.data.nowMonth);}},/***组件的方法列表*/methods:{//获取当前月数据getMonthData(year,month){letthat=this;letdayData=[];letweekData=[];//每月的周的日期数据letsundayDays=[];//每周的周日的数据letdateObj=null;//拿到当月有多少天letlastDay=newDate(year,month,0).getDate();console.log(year+'年'+month+'月有'+lastDay+'天');//找到每个月的星期天,切割数组for(leti=1;i=lastDay;i++){dayData.push(i);//向数组的末尾添加一个或多个元素，并返回新的长度。dateObj=newDate(`${year}/${month}/${i}`);if(dateObj.getDay()==0){//getDay()返回一周中的某一天星期天为0,星期一为1,以此类推。sundayDays.unshift(i);//向数组起始位置添加一个元素}}for(leti=0;isundayDays.length;i++){weekData.unshift(dayData.splice(sundayDays[i]-1,7))//获得每一周的天数}if(dayData.length!==0){weekData.unshift(dayData);}//检查首周是否有七天if(weekData[0].length7){leti=0;letfirstWeek=weekData[0].reverse();letitem=null;letnewWeekData=[];for(i=0;i7;i++){item=firstWeek[i]||-1;newWeekData.unshift(item)}weekData[0]=newWeekData;}//检查最后一周是否有七天if(weekData[weekData.length-1].length7){leti=0;letlastWeek=weekData[weekData.length-1]letitem=null;letnewWeekData=[];for(i=0;i7;i++){item=lastWeek[i]||-1;newWeekData.push(item)}weekData[weekData.length-1]=newWeekData;}//拿到当前日期的本周数据letnowWeekData=weekData.filter((weekItem)={if(weekItem.indexOf(newDate().getDate())!==-1){returnweekItem}})that.setData({weekData,nowWeekData:nowWeekData[0]})console.log('=============第一次渲染========weekData========================')console.log(that.data.weekData)console.log('=============第一次渲染========nowWeekData========================')console.log(that.data.nowWeekData)},//点击某一天clickDay(e){if(e.currentTarget.dataset.day===-1)return;this.setData({showDay:e.currentTarget.dataset.day,clickDay:e.currentTarget.dataset.day,})},getajax(){letthat=thisleturl=app.globalData.URLwx.request({url:url+'/tbOwnerInfo/findSignIn',data:{toiId:wx.getStorageSync('toiId')},success(res){console.log(res.data)if(res.data.data){letdataarray=res.data.data.reverse()letnewDate=dataarray[0].tsh_add_date.substring(0,10);letqiandaoDate=dataarray;that.setData({newDate:newDate,inteList:dataarray,daycount:dataarray.length})//签到时间letrepTime=newDate.replace(/-/g,'/');lettimeTamp=Date.parse(repTime);lettoday=`${that.data.showYear}-${that.data.showMonth}-${that.data.showDay}`;letshowdayTime=today.replace(/-/g,'/');letshowdayTamp=Date.parse(showdayTime);if(timeTamp=showdayTamp){console.log('已签到')that.setData({qiandao:false})}}}})},getSignInDate(year,month){letthat=thisthat.getMonthData(that.data.nowYear,that.data.nowMonth)leturl=app.globalData.URLletclickDate//TODO获得签到日if(month10){clickDate=`${year}-0${month}`}else{clickDate=`${year}-${month}`}console.log('选择的日期')console.log(clickDate)wx.request({url:url+'/tbOwnerInfo/ajax_sign_in',data:{toiMonth:clickDate,toiId:wx.getStorageSync('toiId')},success(res){console.log("获得签到日")console.log(res.data)if(res.data.data!=undefined&&res.data.data!=''){that.setData({dateSign:res.data.data})//当前月的每周数据console.log("=======================有签到日的时候:================================")console.log("weekData:")console.log(that.data.weekData)console.log("nowWeekData:")console.log(that.data.nowWeekData)//循环遍历出月天数据letweekItemData=that.data.weekDatafor(leti=0;iweekItemData.length;i++){for(letj=0;jweekItemData[i].length;j++){for(letk=0;kthat.data.dateSign.length;k++){if(weekItemData[i][j]==that.data.dateSign[k].sign){weekItemData[i][j]={sign:that.data.dateSign[k].sign}}}}}that.setData({weekItemData:weekItemData})console.log("====================有============月数据weekItemData:===========================")console.log(that.data.weekItemData)//检查首周是否有七天if(weekItemData[0].length7){leti=0;letfirstWeek=weekItemData[0].reverse();letitem=null;letnowWeekDataItem=[];for(i=0;i7;i++){item=firstWeek[i]||-1;nowWeekDataItem.unshift(item)}weekItemData[0]=nowWeekDataItem;}//检查最后一周是否有七天if(weekItemData[weekItemData.length-1].length7){leti=0;letlastWeek=weekItemData[weekItemData.length-1]letitem=null;letnowWeekDataItem=[];for(i=0;i7;i++){item=lastWeek[i]||-1;nowWeekDataItem.push(item)}weekItemData[weekItemData.length-1]=nowWeekDataItem;}//拿到当前日期的当前周数据letnowWeekDataItem=weekItemData.filter((weekItem)={if(weekItem.indexOf(newDate().getDate())!==-1){returnweekItem}})that.setData({weekItemData,nowWeekDataItem:nowWeekDataItem[0]})//当前周的数据==========================console.log("nowWeekDataItem:")console.log(that.data.nowWeekDataItem)console.log("================有==============nowWeekDataItem周数据==================:")console.log(that.data.nowWeekDataItem)}else{that.setData({dateSign:''})console.log("=================================没有签到日的时候:======================================")console.log("weekData:")console.log(that.data.weekData)console.log("nowWeekData:")console.log(that.data.nowWeekData)//循环遍历出当月天数据that.setData({weekItemData:that.data.weekData})console.log("================================月数据weekItemData:===========================")console.log(that.data.weekItemData)letweekItemData=that.data.weekData//检查首周是否有七天if(weekItemData[0].length7){leti=0;letfirstWeek=weekItemData[0].reverse();letitem=null;letnowWeekDataItem=[];for(i=0;i7;i++){item=firstWeek[i]||-1;nowWeekDataItem.unshift(item)}weekItemData[0]=nowWeekDataItem;}//检查最后一周是否有七天if(weekItemData[weekItemData.length-1].length7){leti=0;letlastWeek=weekItemData[weekItemData.length-1]letitem=null;letnowWeekDataItem=[];for(i=0;i7;i++){item=lastWeek[i]||-1;nowWeekDataItem.push(item)}weekItemData[weekItemData.length-1]=nowWeekDataItem;}//拿到当前日期的本周数据letnowWeekDataItem=weekItemData.filter((weekItem)={if(weekItem.indexOf(newDate().getDate())!==-1){returnweekItem}})that.setData({weekItemData,nowWeekDataItem:nowWeekDataItem[0]})}}})},//点击签到qiandao(){letthat=thisleturl=app.globalData.URLletnewDate=that.data.newDatewx.request({url:url+'/tbOwnerInfo/signIn',data:{toiId:wx.getStorageSync('toiId')},success(res){console.log(res.data)if(res.data.code==100){console.log('签到')wx.redirectTo({url:'../calendar/calendar',})wx.showToast({title:'签到成功！',icon:'success',image:'',duration:1500,mask:true})that.setData({qiandao:false})}},})},foldAndUnfold(){letthat=this;that.setData({calendarfold:!that.data.calendarfold,calendarbg:'../../images/calendar_lg_bg.png',arrowurl:'../../images/arrow_up.png'})if(!that.data.calendarfold){that.setData({top:520+'rpx',height:617+'rpx'})}else{that.setData({calendarbg:'../../images/calendar_bg.png',arrowurl:'../../images/arrow_down.png',top:160+'rpx',height:250+'rpx'})}},sign_prev:function(){console.log("上一月");varnowMonth=this.data.nowMonth;varclickMonth=this.data.clickMonth;if(nowMonth=="1"){varnowMonth="12";varnowYear=parseInt(this.data.nowYear)-1;}else{varnowMonth=parseInt(this.data.nowMonth)-1;varnowYear=this.data.nowYear;}if(parseInt(clickMonth-3)==nowMonth){wx.showToast({title:'不能查看更多了',icon:'loading',duration:1500});return;}varthat=this;if(nowMonth10){varnowMonths="0"+nowMonth;}else{varnowMonths=clickMonth;}this.setData({nowYear:nowYear,nowMonth:nowMonth,});this.setData({dateSign:''})this.getSignInDate(this.data.nowYear,this.data.nowMonth)},sign_next:function(){console.log("下一月");varnowMonth=this.data.nowMonth;varclickMonth=this.data.clickMonth;if(clickMonth==nowMonth){wx.showToast({title:'未签到不能查看',icon:'loading',duration:1500});return;}if(nowMonth=="12"){varnowMonth="1";varnowYear=parseInt(this.data.nowYear)+1;}else{varnowMonth=parseInt(this.data.nowMonth)+1;varnowYear=this.data.nowYear;}varthat=this;if(nowMonth10){varnowMonths="0"+nowMonth;}else{varnowMonths=clickMonth;}this.setData({nowYear:nowYear,nowMonth:nowMonth,});this.setData({dateSign:''})this.getSignInDate(this.data.nowYear,this.data.nowMonth)}}})json:{"navigationBarTitleText":"签到","component":true,"usingComponents":{}}

3.css

.topdate{text-align:center;margin:0auto;width:630rpx;height:32rpx;line-height:32rpx;background:rgba(255,90,0,0.5);border-radius:16rpx;position:relative;font-size:24rpx;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(255,255,255,1);display:flex;justify-content:space-between;margin-top:30rpx;}.topleft{width:12rpx;height:19rpx;margin-top:6rpx;}.topright{width:12rpx;height:19rpx;margin-top:6rpx;}.calendar{position:absolute;top:0;left:0;width:100%;height:100%;}.calendar-header{display:flex;justify-content:center;border-bottom:2rpxsolidrgba(255,255,255,0.25);height:74rpx;line-height:88rpx;font-size:26rpx;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(255,254,254,1);}.ch-week{flex:1;text-align:center;}.ch-item-text{display:inline-block;width:50rpx;height:50rpx;border-radius:50%;}.calendar-month-week{display:flex;position:relative;height:66rpx;line-height:66rpx;font-size:24rpx;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(255,254,254,1);}.cm-week-day{flex:1;display:flex;justify-content:center;align-items:center;text-align:center;}.cm-week-day-circle{background-color:#fff;color:#f80;width:40rpx;line-height:40rpx;text-align:center;border-radius:50%;}.signday{background-color:#fff;color:#f80;display:inline-block;width:40rpx;line-height:40rpx;text-align:center;border-radius:50%;}.today{color:#fff;}.bg{width:750rpx;height:250rpx;position:relative;}.switchbtn{position:absolute;left:355rpx;z-index:99;}.switchbtnimage{width:36rpx;height:20rpx;}.box{width:750rpx;height:200rpx;margin-top:-80rpx;background:rgba(255,220,178,1);}.showcontent{width:686rpx;height:180rpx;margin:0auto;padding-top:57rpx;background:rgba(255,255,255,1);border-radius:0rpx0rpx15rpx15rpx;display:flex;justify-content:space-between;padding-left:40rpx;padding-right:24rpx;}.showcontent.icon_qiandao{width:60rpx;height:60rpx;}.showcontent.title{margin-left:40rpx;}.showcontent.qiandao{height:26rpx;font-size:28rpx;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(64,64,64,1);}.showcontent.qiandaotext{margin-left:17rpx;height:26rpx;font-size:28rpx;font-family:PingFang-SC-Heavy;font-weight:bold;color:rgba(255,138,0,1);}.showcontent.detail{margin-top:14rpx;height:21rpx;font-size:22rpx;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(191,191,191,1);}.showcontent.clickbtn{width:180rpx;height:60rpx;line-height:60rpx;color:#fff;background:linear-gradient(toright,#ffdcb2,#ff5a00);border-radius:30rpx;font-size:28rpx;font-family:PingFang-SC-Bold;font-weight:bold;z-index:999;}.calendar_info{width:750rpx;height:auto;margin-top:24rpx;padding-bottom:80rpx;background:rgba(255,255,255,1);}.calendar_info.title{width:100%;border-bottom:2rpxsolidrgba(242,242,242,1);margin:0auto;padding-left:32rpx;height:74rpx;line-height:88rpx;font-size:28rpx;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(255,138,0,1);}.calendar_info.today{width:654rpx;height:59rpx;margin:0auto;line-height:66rpx;font-size:24rpx;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(255,90,0,1);border-bottom:2rpxsolidrgba(247,247,247,1);}.flex_list{display:flex;justify-content:space-between;width:654rpx;height:59rpx;line-height:59rpx;margin:0auto;font-size:26rpx;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(64,64,64,1);}.flex_box.flex_list:first-child{color:rgba(255,90,0,1);}.flex_list.right_text{font-size:24rpx;}

4.效果图如下：

5.

6.

7.这是因为要自定义日期样式，整理出来的样式，和签到样式显示，记录下来只为做个笔记，如果有需要的，不懂得，可以此处留言，看到会及时回复