当前位置: 首页 > Web前端 > HTML

微信小程序简单日历(公历)的实现

时间:2023-03-29 11:07:29 HTML

微信小程序简单日历(公历)的实现周六加班的时候,突然想看看日历是怎么实现的,于是尝试了一下写下来。-------------分向線---------------JS部分//pages/calendar/calendar.jsPage({/***页面初始数据*/data:{week:["One","Two","Three","Four","Five","Six","Day"],//weekmaxDayList:[31,28,31,30,31,30,31,31,30,31,30,31],//一年12个月,每个月的天数初始化为正常年份nowYear:newDate().getFullYear(),//当前年份nowMonth:newDate().getMonth()+1,//当前月份totalDay:[],//Calendardays},/***切换年月*/changeDate(e){lettype=e.currentTarget.dataset.type;letnowYear=this.data.nowYear;letnowMonth=this.data.nowMonth;switch(type){case"preYear"://上一年nowYear-=1;this.setData({nowYear});break;case"preMonth"://上个月nowMonth-=1;if(nowMonth<=0){nowMonth=12;nowYear-=1;}break;case"nextMonth"://下个月nowMonth+=1;if(nowMonth>=13){nowMonth=1;nowYear+=1;}break;case“恩xtYear"://下一年nowYear+=1;break;}this.setData({nowYear,nowMonth});this.initCalendar();},/***初始化日历*/initCalendar(){letmaxDayList=this.data.maxDayList;设年=this.data.nowYear,月=this.data.nowMonth;if((year%4==0&&year%100!=0)||year%400==0){//计算当前年份是否为闰年,规则:能被4整除且不能被100整除的年份,或者能被400整除的年份maxDayList[1]=29;//二月29天}else{//平年maxDayList[1]=28;//2月28天}this.setData({maxDayList});letfirstDayWeek=newDate(year+"-"+month+"-1").getDay();//1当月的第几天是星期几firstDayWeek=firstDayWeek>0?firstDayWeek:7;//星期日从0到7letendDayWeek=newDate(year+"-"+month+"-"+maxDayList[month-1]).getDay();//当月的最后一天是星期几endDayWeek=endDayWeek>0?endDayWeek:7;//星期日从0变为7letbeforArr=[],afterArr=[];//beforArr:要求本月1号之前补上个月的最后几天,afterArr:补本月末下月初//求补的天数上个月for(leti=0;我{{nowYear+"-"+(nowMonth>=10?nowMonth:"0"+nowMonth)}}<图片src="../../image/mine/calendar/arrow-right.png"bindtap="changeDate"data-type="nextMonth">{{item}}{{subItem.day}}----------------------------分割线------------------------css部分/*pages/calendar/calendar.wxss*/page{height:100%;宽度:100%;背景:#f3f5f9;}.calendar-page{宽度:100%;高度:100%;填充:30rpx;box-sizing:border-box;}.??calendar{border-radius:30rpx;背景:#fff;盒子阴影:0rpx24rpx38rpxrgba(60、128、209、0.09);框大小:边框框;填充:30rpx;}.btn-row{高度:70rpx;行高:70rpx;文本对齐:居中;字体大小:24rpx;margin-bottom:20rpx;}.btn-rowview{display:inline-block;垂直对齐:中间;右边距:30rpx;margin-left:15rpx;}.btn-rowimage{vertical-align:middle;右边距:15rpx;宽度:25rpx;高度:25rpx;填充:5rpx10rpx;边界半径:10rpx;border:1rpxsolid#00a8ff;}.week-row{宽度:100%;显示:弹性;证明内容:空格之间;align-items:center;}.week-item{宽度:50rpx;高度:50rpx;文本对齐:居中;行高:50rpx;字体大小:24rpx;字体粗细:粗体;颜色:#000000;}.day-row{宽度:100%;之间;对齐项目:居中;margin-top:20rpx;}.day-item{width:50rpx;高度:50rpx;文本对齐:居中;行高:50rpx;字体大小:24rpx;大胆的;颜色:#000000;边界半径:50%;box-sizing:border-box;}.??day-today{背景:#00a8ff;color:#fff;}.day-otherMonth{color:#cdcdcd;}--------------------------分割线-----------------------说明:今天只加蓝色背景,不写日历点击事件或备忘录,只写基本样式,重要要写日期或者备忘,可以根据后台返回数据对应的日期加上备忘标记,然后写一个小红点的样式