小程序自定义日历效果

2023-09-02 03:41:04 71

本文实例为大家分享了小程序自定义日历展示的具体代码，供大家参考，具体内容如下

重点在于将数个月的日期拆分重组，然后再统一以月为输出。详细操作代码注释有说明。






{{item.year||"--"}}年{{item.Month||"--"}}月



{{item}}








{{item.today}}

.js:

letchoose_year=null,//选择的年
choose_month=null;//选择的月
letclickNum=newArray();//点击日期的次数，做显示判断处理
letdate=newDate();
letcur_year=date.getFullYear();
letcur_month=date.getMonth()+1;
letweeks_ch=['日','一','二','三','四','五','六'];//日历的显示
letallMan=newArray();//循环总日历容器
lethaveClickNum=false;//是否可点击选择日期
lethavInitDate=false;//是否已经重置数据
letconf={//拿去给Page
onLoad(){
if(allMan.length!=0){//重新进入界面发现已经有数据，直接渲染
havInitDate=false;
clickNum=newArray();
haveClickNum=true;
this.setData({
allMan,
weeks_ch
})
}else{
allMan=newArray();//非常重要的主输出，计算好的每月数据都合拼在里面
clickNum=newArray();
letthat=this;
letempytGrids=this.calculateEmptyGrids(cur_year,cur_month);//计算空格
letdays=this.calculateDays(cur_year,cur_month);//计算日期总数
letDogDays={year:cur_year,Month:cur_month,empyt:empytGrids,day:days};//组装年、月、星期一前的空格、日
allMan.push(DogDays);
letnewMonth=cur_month+1;
letnewYear=cur_year;
if(newMonth>12){//新年重置1月份
newYear=cur_year+1;
newMonth=1;
}
letempytGridsTwos=this.calculateEmptyGridsTwo(newYear,newMonth);//计算新月份的空格
letdayTwos=this.calculateDaysTwo(newYear,newMonth);//计算日期总数
letcatDays={year:newYear,Month:newMonth,empyt:empytGridsTwos,day:dayTwos};
allMan.push(catDays);
letsakura=days.concat(dayTwos);//将存放日期的内容统一合并为数组，单独处理是否可选等展示状态，属于中间件数组
letisTrue=newArray();//存放可选
for(vari=0;i12){
newYearThree=newYear+1;
newMonthThree=1;
}
letempytGridsThree=that.calculateEmptyGridsTwo(newYearThree,newMonthThree);//计算空格
letdayThree=that.calculateDaysTwo(newYearThree,newMonthThree,91-isTrue.length);//计算日期总数,61减，今天不算
letduckDays={year:newYearThree,Month:newMonthThree,empyt:empytGridsThree,day:dayThree};
sakura=sakura.concat(dayThree);
allMan.push(duckDays);
if(parseInt(91-isTrue.length)>parseInt(dayThree.length)){//第n个月是否足够显示需要的可选日期长度
for(vari=0;i12){
newYearFour=newYearThree+1;
newMonthFour=1;
}
letempytGridsFour=that.calculateEmptyGridsTwo(newYearFour,newMonthFour);//计算空格
letdayFour=that.calculateDaysTwo(newYearFour,newMonthFour,91-isTrue.length);//计算日期总数,61减，今天不算
letwolfDays={year:newYearFour,Month:newMonthFour,empyt:empytGridsFour,day:dayFour};
sakura=sakura.concat(dayFour);
allMan.push(wolfDays);
}else{//不足够继续增加第n+1个月
letnewMonthFour=newMonthThree+1;
letnewYearFour=newYearThree;
if(newMonthFour>12){
newYearFour=newYearThree+1;
newMonthFour=1;
}
letempytGridsFour=that.calculateEmptyGridsTwo(newYearFour,newMonthFour);//计算空格
letdayFour=that.calculateDaysTwo(newYearFour,newMonthFour,-1);//计算日期总数,61减，今天不算
letwolfDays={year:newYearFour,Month:newMonthFour,empyt:empytGridsFour,day:dayFour};
sakura=sakura.concat(dayFour);
allMan.push(wolfDays);
}
}
if(isTrue.length<90){
addMoreMonth();
}
this.setData({
allMan,
weeks_ch
})
}
},
onShow:function(){
//console.log(allMan);
//allMan=newArray();//循环总日历容器
//页面显示
},
getThisMonthDays(year,month){
returnnewDate(year,month,0).getDate();
},
getFirstDayOfWeek(year,month){
returnnewDate(Date.UTC(year,month-1,1)).getDay();
},
calculateEmptyGrids(year,month){
letfirstDayOfWeek=this.getFirstDayOfWeek(year,month);
letempytGrids=[];
if(firstDayOfWeek>0){
for(leti=0;i0){
for(leti=0;i12){
newYear=cur_year+1;
newMonth=1;
}

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

this.setData({
cur_year:newYear,
cur_month:newMonth
});
}
},
tapDayItemX(e){//点击日期处理
if(clickNum.length>=2)//点了两次，不可再点
return;
if(haveClickNum){//是否已经选择过日期
this.initChosedDate();//重置选择过的样式
letdayZ=e.currentTarget.dataset.dayz;
for(leti=0;iy){
return1;
}else{
return0;
}
}

functionGetDateDiff(startDate,endDate){
letdates=Math.abs((startDate-endDate))/(1000*60*60*24);
returndates;
}

functionintegerDate(choseDate){
letintegerDay=newDate(Date.parse(choseDate.replace(/-/g,"/"))).getTime();
returnintegerDay;
}

.wxss：

/*pages/calendar/calendar.wxss*/
.top-handle{
height:80rpx;
}
.prev{
text-align:right;
height:80rpx;
}
.next{
height:80rpx;
}
.prev-handle{
width:80rpx;
height:100%;
}
.next-handle{
width:80rpx;
height:100%;
}
.date-area{
width:50%;
height:80rpx;
text-align:center;
}
.weeks{
height:50rpx;
line-height:50rpx;
opacity:0.5
}
.week{
text-align:center;
}
.days{
height:500rpx;
}
.grid{
width:107.1428571429rpx;
}
.day{
width:100%;
height:100%;
color:#000;
font-size:26rpx;
font-weight:200;
}
.border-instinct{
position:relative;
left:0;
top:0;
color:#fff;
}
.border-radius{
border-radius:5px005px;
position:relative;
left:0;
top:0;
color:#fff;
}
.border-right-radius{
border-radius:05px5px0;
position:relative;
left:0;
top:0;
color:#fff;
}
.pink-bg{
background-color:#ffe5b4;
color:#f6ac1d;
}
.dependence-bg{
background-color:#d9246b;
}
.purple-bg{
background-color:#b8b8f1;
}

.right-triangle::after{
content:"";
display:block;
width:0;
height:0;
border:15rpxsolidtransparent;
border-left-color:#ff629a;
position:absolute;
right:-22rpx;
top:18rpx;
}
.left-triangle::before{
content:"";
display:block;
width:0;
height:0;
border:15rpxsolidtransparent;
border-right-color:#ff629a;
position:absolute;
left:-22rpx;
top:18rpx;
}
.tips{
text-align:center;
margin-top:20rpx;
margin-bottom:20rpx;
}
.types{
background-color:#ffedf4;
height:50rpx;
}
.type-dot{
width:25rpx;
height:25rpx;
border-radius:50%;
margin-right:10rpx;
}
.type-dot-ymq{
color:#FF7CA0;
background-color:#FF7CA0;
}
.type-dot-ycq{
color:rgb(255,200,202);
background-color:rgb(255,200,202);
}
.type-dot-aqq{
color:rgb(118,191,92);
background-color:rgb(118,191,92);
}
.type-dot-yyq{
color:#FF7CA0;
background-color:#FF7CA0;
}
.type-dot-plr{
color:rgb(211,189,215);
background-color:rgb(211,189,215);
}
.types-desc{
padding:020rpx;
}
.type-name{
margin-top:50rpx;
margin-bottom:30rpx;
}
.type-desc{
padding:035rpx;
line-height:38rpx;
}
.explain{
border-top:1pxsolid#eee;
width:90%;
margin:20rpx5%20rpx5%;
padding:20rpx0;
}
.explain-title{
font-weight:bold;
margin-bottom:15rpx;
}
.explain-item{
padding:8rpx20rpx;
color:#fff;
}
.left-border-radius{
border-top-left-radius:20rpx;
border-bottom-left-radius:20rpx;
}
.right-border-radius{
border-top-right-radius:20rpx;
border-bottom-right-radius:20rpx;
}
.picker-btns{
height:120rpx;
line-height:120rpx;
border-bottom:1rpxsolid#FF7CA0;
}
.picker-confirm{
margin-right:50rpx;
}
.picker-cancel{
margin-left:50rpx;
}
.picker-view{
color:#FF7CA0;
text-align:center;
}

.box{
display:flex;
}

.box-lr{
flex-direction:row;
}

.box-rl{
flex-direction:row-reverse;
}

.box-tb{
flex-direction:column;
}

.box-bt{
flex-direction:column-reverse;
}

.box-pack-center{
justify-content:center;
}
.day-week{
color:#ccc;

}

.box-pack-start{
justify-content:flex-start;
}

.box-pack-end{
justify-content:flex-end;
}

.box-pack-between{
justify-content:space-between;
}

.box-pack-around{
justify-content:space-around;
}

.box-align-center{
align-items:center;
}
.years-month{
color:#000;
}
.box-align-start{
align-items:flex-start;
}

.box-align-end{
align-items:flex-end;
}

.self-align-center{
align-self:center;
margin:0auto;
}

.self-align-start{
align-self:flex-start;
}

.self-align-end{
align-self:flex-end;
}

.self-align-stretch{
align-self:stretch;
}

.box-wrap{
flex-wrap:wrap;
}

.box-nowrap{
flex-wrap:nowrap;
}

.flex{
flex-grow:1;
background:#fff;
}

.shrink{
flex-shrink:1;
}
.bg{
background-image:linear-gradient(tobottom,#faefe7,#ffcbd7);
overflow:hidden;
}
.brown-color{
color:#784344;
}
.pink-color{
color:#ff629a;
}
.white-color{
color:#fff;
}
.fs24{
font-size:24rpx;
}
.fs28{
font-size:28rpx;
}
.fs32{
font-size:32rpx;
}
.fs36{
font-size:36rpx;
}

/*灰色显示*/
.grays{
color:#ccc;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

小程序自定义日历效果

热门推荐

随机推荐