**
小程序日历
**
最近在开发项目中遇到了写日历这个功能,然后根据需求写了一下。具体代码如下。有需要的粘过去就可以直接用。 我开发的是淘宝小程序,跟微信小程序语法很类似,微信小程序的话,可以参考文档,把有点语法改一下就可以了。
<view class="calendar" style="height:{{calendarH}}rpx;background:url(/images/signIn/images/red-calendar.png) no-repeat;background-size:100% 100%;">
<view class="selectDate">
<view class="goleft" onTap="prevMonth"></view>
<view class="date-wrap">
{{year}}年{{month}}月
</view>
<view class="goright" onTap="nextMonth"></view>
</view>
<view class="week">
<view a:for="{{weekArr}}" a:for-index="index" a:for-item="item" a:key="key" >{{item}}</view>
</view>
<view class="date">
<!-- 循环的是展开的天数 还是 折叠的天数 -->
<block a:for="{{calendarH==593?dateArr:nowWeekDay}}" a:for-index="index" a:for-item="item" a:key="key">
<!-- 展开时的样式 -->
<view a:if="{{calendarH==593?true:false}}" style="{{index ==0?'margin-left:'+ (param+37 )*firstDay +'rpx;':''}}width:85rpx;height:61rpx;line-height:61rpx;position:relative;border:1rpx solid #eee;overflow: hidden;" class="{{index+1==day?'today':''}}">
<view class="day">
<image mode="scaleToFill" a:if="{{checkIn.includes(item<10?('0'+item):item+'')}}" src="/images/signIn/images/prize_04.png"/>
<view a:if="{{louSignArr.includes(item+'')}}" onTap="handleToRepair" class="repair">补签</view>
{{item}}
</view>
</view>
<!-- 折叠后的样式 -->
<view a:if="{{calendarH==593?false:true}}" style="width:85rpx;height:61rpx;line-height:61rpx;text-align: center;border:1rpx solid #eee">
<view class="day">
<image mode="scaleToFill" a:if="{{checkIn.includes(item<10?('0'+item):item+'')}}" src="/images/signIn/images/prize_04.png"/>
<view a:if="{{louSignArr.includes(item+'')}}" onTap="handleToRepair" class="repair">补签</view>
{{item}}
</view>
</view>
<!-- 控制折叠 展开的 -->
<view class="fold" onTap="handleFold">
{{calendarH==593?"折叠":"展开"}}
<image mode="scaleToFill" src="/images/signIn/images/xia.png"/>
</view>
<!-- </block> -->
</block>
</view>
.calendar{
width:648rpx;
margin-left:52rpx;
border-radius: 9rpx;
margin-top:409rpx;
position: relative;
overflow: hidden;
}
.selectDate{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height:90rpx;
font-size: 30rpx;
font-weight: bold;
color:#ff5754;
margin: 0 auto;
}
.week{
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
padding: 0 20rpx;
color:#ff5754;
margin-bottom:15rpx;
}
.week view{
width:170rpx;
text-align: center;
}
.date{
width:100%;
box-sizing: border-box;
padding-left:20rpx;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.goleft{
background:url(/images/img_left.png);
background-size: 100% 100%;
width: 16rpx;
height: 20rpx;
}
.goright{
background:url(/images/img_right.png);
background-size: 100% 100%;
width: 16rpx;
height: 20rpx;
}
.today{
color:#ff5754;
}
.day{
float:right;
margin-right:10rpx;
position: relative;
}
.day image{
width:41rpx;
height:36rpx;
position: absolute;
right:30rpx;
bottom:0;
}
.day .repair{
white-space: nowrap;
font-size:23rpx;
color:#ff8400;
position: absolute;
right:28rpx;
top:16rpx;
}
.fold{
position: absolute;
left:42%;
bottom:16rpx;
font-size: 23rpx;
color:#ff7158;
background:#ffddd2;
padding:9rpx 20rpx;
border-radius: 30rpx;
}
.fold image{
width:18rpx;
height:10rpx;
margin-left:6rpx;
}
我的需求里面有折叠后,显示当前星期的天数。可根据具体需求来修改部分代码。
data: {
// 日历数据开始
year:'',
month:'',
day:'',
weekArr: ['日', '一', '二', '三', '四', '五','六'],
dateArr:[],
firstDay:'',
lastDay:'',
nowWeekDay:[],//当前日期所在行的 所有日期
param:49.42,//日历盒子高/12的数据 用来控制所有天数盒子的大小
calendarH:593,//日历动态高度
checkIn:[],//处理过的已签到的日期 单纯的数据,用于页面判断日历的图标
// 日历数据结束
},
onLoad(options) {
this.getDate();//处理日历
this.setDate();//处理日历
},
handleFold(){//折叠
/* 处理获取当前日期的一周号数 start */
var now = new Date();
var nowTime = now.getTime() ;
var day = now.getDay() || 7;
var oneDayLong = 24*60*60*1000 ;
var MondayTime = nowTime - (day-1)*oneDayLong;
var TuesdayTime = nowTime - (day-2)*oneDayLong;
var WednesdayTime = nowTime - (day-3)*oneDayLong;
var ThursdayTime = nowTime - (day-4)*oneDayLong;
var FridayTime = nowTime - (day-5)*oneDayLong;
var SaturdayTime = nowTime - (day-6)*oneDayLong;
var SundayTime = nowTime + (7-day)*oneDayLong;
var sunday = new Date(SundayTime).getDate()-7;
var monday = new Date(MondayTime).getDate();
var tuesday = new Date(TuesdayTime).getDate();
var wednesday = new Date(WednesdayTime).getDate();
var thursday = new Date(ThursdayTime).getDate();
var friday = new Date(FridayTime).getDate();
var saturday = new Date(SaturdayTime).getDate();
var nowWeekDay=[sunday,monday,tuesday,wednesday,thursday,friday,saturday]
this.setData({
nowWeekDay:nowWeekDay
})
/* 处理获取当前日期的一周号数 end */
if(this.data.calendarH == 593){
this.setData({
calendarH:278
})
}else{
this.setData({
calendarH:593
})
}
},
getDate: function () { //获取当月日期
var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth();
var months = month + 1;
this.data.year = year;
this.data.month = months;
this.data.day = mydate.getDate();
var fist = new Date(year, month, 1);
this.data.firstDay = fist.getDay();
var last = new Date(year, months, 0);
this.data.lastDay = last.getDate();
this.setData({
year: this.data.year,
month: this.data.month,
day: this.data.day,
firstDay: this.data.firstDay,
lastDay: this.data.lastDay
})
},
setDate: function () {
for (var i = 1; i < this.data.lastDay + 1; i++) {
this.data.dateArr.push(i);
}
this.setData({
dateArr: this.data.dateArr,
firstDay: this.data.firstDay
})
},
prevMonth:function(){ //上一月
var months="";
var years="";
if(this.data.month ==1){
years=this.data.year-1
this.data.month=12;
months=this.data.month;
}else{
years=this.data.year;
months = this.data.month - 1;
}
var first = new Date(years, months-1, 1);
this.data.firstDay = first.getDay();
var last = new Date(years, months, 0);
this.data.lastDay = last.getDate();
this.setData({
month: months,
year:years,
firstDay: this.data.firstDay,
lastDay: this.data.lastDay
})
this.data.dateArr = [];
for (var i = 1; i < this.data.lastDay + 1; i++) {
this.data.dateArr.push(i);
}
this.setData({
dateArr: this.data.dateArr
})
},
nextMonth:function(){ //下一月
var months="";
var years="";
if(this.data.month== 12){
this.data.month=0;
months = this.data.month;
years = this.data.year+1;
}else{
months = this.data.month+1;
years = this.data.year;
}
var months = this.data.month + 1;
var first = new Date(years, months-1,1);
this.data.firstDay= first.getDay();
var last = new Date(years,months,0);
this.data.lastDay= last.getDate();
this.setData({
month: months,
year:years,
firstDay:this.data.firstDay,
lastDay:this.data.lastDay
})
this.data.dateArr = [];
for (var i = 1; i < this.data.lastDay + 1; i++) {
this.data.dateArr.push(i);
}
this.setData({
dateArr: this.data.dateArr
})
},