先看效果
下面是html代码
<view class="calendar">
<view class="calendarTop">
<text class="calendarTopL" catchtap="prev">{{'<'}}</text>
<text class="calendarTopC">{{nowYear}}年{{nowMonthStr}}月</text>
<text class="calendarTopR" catchtap="next">{{'>'}}</text>
</view>
<view class="calendarWeek">
<text class="calendarWeekItem" wx:for="{{weekList}}" wx:key="item">{{item}}</text>
</view>
<view class="calendarDate">
<text class="calendarDateItem {{item.now ? 'dateItemNow' : ''}} {{item.gray ? 'dateItemGray' : ''}}" wx:for="{{month}}" wx:key="index">{{item.text}}</text>
</view>
</view>
下面是js代码
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
weekList: ['一','二','三','四','五','六','日'], //一周
month:[
{
// text 此值为日期值,类型为number
// now 此值为今天,在本月的周末为false,其它时候为true,类型为布尔
// gray 此值为日期置灰,本月中的上月和下月日期以及本月的周末,类型为布尔
}
],//一个月所有数据
nowYear: 0,//选择的年
nowMonth: 0,//选择的月
nowMonthStr: '',//转换格式的月
today: 0,//今天
},
ready(){
this.gainDate();
this.dateInit()
},
/**
* 组件的方法列表
*/
methods: {
// 获取当前年月日
gainDate(){
let d = Reflect.construct(Date,[]);
this.setData({
nowYear: d.getFullYear(),
nowMonth: d.getMonth() + 1,
today: d.getDate(),
nowMonthStr: (d.getMonth() + 1).toString().padStart(2,'0')
})
},
// 上个月
prev(){
if(this.data.nowMonth > 1){
this.setData({
nowMonth: this.data.nowMonth - 1,
nowMonthStr: (this.data.nowMonth - 1).toString().padStart(2,'0')
})
}else{
this.setData({
nowYear: this.data.nowYear - 1,
nowMonth: 12,
nowMonthStr: "12"
})
};
this.todayProminent()
this.dateInit()
},
// 下个月
next(){
if(this.data.nowMonth < 12){
this.setData({
nowMonth: this.data.nowMonth + 1,
nowMonthStr: (this.data.nowMonth + 1).toString().padStart(2,'0')
})
}else{
this.setData({
nowYear: this.data.nowYear + 1,
nowMonth: 1,
nowMonthStr: "01"
})
}
this.todayProminent()
this.dateInit()
},
//今天日期凸显
todayProminent(){
// 将今天置为0
this.setData({
today: 0
})
let d = Reflect.construct(Date,[]);
if(d.getFullYear() == this.data.nowYear && d.getMonth() + 1 == this.data.nowMonth){
this.setData({
today: d.getMonth() + 1 > this.data.nowMonth + 1 ? 0 : d.getDate()
})
}
},
// 日历主体
dateInit(){
let now = Reflect.construct(Date,[this.data.nowYear,this.data.nowMonth -1]); //当前月份的一号
let startWeekNow = now.getDay(); //当前月份的一号对应的星期
let end = Reflect.construct(Date,[Reflect.construct(Date,[this.data.nowYear,this.data.nowMonth]) -10]);// 当前月份的最后一号
let endWeekNow = end.getDay(); //当前月份的最后一天对应的星期
let dayNumNow = Reflect.construct(Date,[this.data.nowYear,this.data.nowMonth,0]).getDate(); //当前月有多少天
let dayNumPrev = Reflect.construct(Date,[this.data.nowMonth - 1 ? this.data.nowYear : this.data.nowYear -1,this.data.nowMonth - 1 ? this.data.nowMonth - 1 : 12,0]).getDate(); //上个月有多少天
let prevMonthShow = []; //上个月日期展示的数据
let nowMonthShow = []; //本月日期展示的数据
let nextMonthShow = []; //下个月日期展示的数据
for(let i = 1; i < (startWeekNow ? startWeekNow : 7); i++){
prevMonthShow.unshift(
{
text: dayNumPrev - i + 1,
now: false,
gray: true
}
)
};
for(let i = 1; i <= dayNumNow; i++){
if(this.data.today == i){
nowMonthShow.push(
{
text: i,
now: true,
gray: false
// 下面代码是将周末置灰以及周末不显示今天的样式
// now: ((startWeekNow + i - 1) % 7 == 6 || (startWeekNow + i - 1) % 7 == 0) ? false : true,
// gray: ((startWeekNow + i - 1) % 7 == 6 || (startWeekNow + i - 1) % 7 == 0) ? true : false
}
)
}else{
nowMonthShow.push(
{
text: i,
now: false,
gray: false
// 下面代码是将周末置灰
// gray: ((startWeekNow + i - 1) % 7 == 6 || (startWeekNow + i - 1) % 7 == 0) ? true : false
}
)
}
};
for(let i = 1; i <= (endWeekNow ? 7 - endWeekNow : 0); i++){
nextMonthShow.push(
{
text: i,
now: false,
gray: true
}
)
};
this.setData({
month: [...prevMonthShow,...nowMonthShow,...nextMonthShow]
})
}
}
})
下面是css代码
.calendar{
width: 690rpx;
border-top: 1rpx solid #00000005;
background-color: #FFFFFF;
margin: 0 auto;
}
.calendarTop{
padding-top: 22rpx;
display: flex;
justify-content: center;
position: relative;
}
.calendarTopL{
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 400;
color: #333333;
height: 36rpx;
line-height: 36rpx;
position: absolute;
left: 34rpx;
top: 22rpx;
}
.calendarTopC{
font-size: 26rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
height: 36rpx;
line-height: 36rpx;
}
.calendarTopR{
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 400;
color: #333333;
height: 36rpx;
line-height: 36rpx;
position: absolute;
right: 34rpx;
top: 22rpx;
}
.calendarWeek{
display: flex;
flex-direction: row;
padding-top: 24rpx;
}
.calendarWeekItem{
width: 60rpx;
height: 60rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 60rpx;
text-align: center;
margin-left: 35rpx;
}
.calendarDate{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.calendarDateItem{
width: 60rpx;
height: 60rpx;
border-radius: 30rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 60rpx;
text-align: center;
margin-left: 35rpx;
margin-top: 20rpx;
}
.dateItemNow{
background: #2E8CFF;
color: #FFFFFF;
}
.dateItemGray{
color: #CCCCCC;
}
这是基础版,可以在此基础上添加自己想要的效果