android小程序日历,微信小程序：日历功能实现

1.Wxml

{{year}}年{{month}}月

{{item}}

{{item.dateNum}}

2.Js

Page({

data: {

year: 0,

month: 0,

date: ['日', '一', '二', '三', '四', '五', '六'],

dateArr: [],

isToday: 0,

isTodayWeek: false,

todayIndex: 0

},

onLoad: function () {

let now = new Date();

let year = now.getFullYear();

let month = now.getMonth() + 1;

this.dateInit();

this.setData({

year: year,

month: month,

isToday: '' + year + month + now.getDate()

})

},

dateInit: function (setYear, setMonth) {

//全部时间的月份都是按0~11基准，显示月份才+1

let dateArr = []; //需要遍历的日历数组数据

let arrLen = 0; //dateArr的数组长度

let now = setYear ? new Date(setYear, setMonth) : new Date();

let year = setYear || now.getFullYear();

let nextYear = 0;

let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数

let nextMonth = (month + 1) > 11 ? 1 : (month + 1);

let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay(); //目标月1号对应的星期

let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天

let obj = {};

let num = 0;

if (month + 1 > 11) {

nextYear = year + 1;

dayNums = new Date(nextYear, nextMonth, 0).getDate();

}

arrLen = startWeek + dayNums;

for (let i = 0; i < arrLen; i++) {

if (i >= startWeek) {

num = i - startWeek + 1;

obj = {

isToday: '' + year + (month + 1) + num,

dateNum: num,

weight: 5

}

} else {

obj = {};

}

dateArr[i] = obj;

}

this.setData({

dateArr: dateArr

})

let nowDate = new Date();

let nowYear = nowDate.getFullYear();

let nowMonth = nowDate.getMonth() + 1;

let nowWeek = nowDate.getDay();

let getYear = setYear || nowYear;

let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;

if (nowYear == getYear && nowMonth == getMonth) {

this.setData({

isTodayWeek: true,

todayIndex: nowWeek

})

} else {

this.setData({

isTodayWeek: false,

todayIndex: -1

})

}

},

/**

* 上月切换

*/

lastMonth: function () {

//全部时间的月份都是按0~11基准，显示月份才+1

let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;

let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;

this.setData({

year: year,

month: (month + 1)

})

this.dateInit(year, month);

},

/**

* 下月切换

*/

nextMonth: function () {

//全部时间的月份都是按0~11基准，显示月份才+1

let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;

let month = this.data.month > 11 ? 0 : this.data.month;

this.setData({

year: year,

month: (month + 1)

})

this.dateInit(year, month);

}

})

3.Wxss

.calendar_title{width: 70%; margin: 10rpx auto; justify-content: space-between;font-size: 20pt;color: #fff;}

.calendar_title .icon image{width: 60rpx; height: 60rpx;margin: 5rpx auto;}

/* 日历 */

.calendar{width: 100%;margin-top: 75rpx;background: #fff;border-bottom-right-radius: 20rpx;border-bottom-left-radius: 20rpx;padding: 0 0 20rpx;font-family: FZZhunYuan-M02S;}

.header{font-size: 0;width: 80%;margin: 0 auto;}

.header>view{display: inline-block;width: 14.285%;color: #666;font-size: 30rpx;text-align: center;border-bottom: 1px solid #D0D0D0;padding: 20rpx 0;}

.weekMark{position: relative;width: 80%;margin: 0 auto;}

.weekMark view{position: absolute;bottom: 0;left: 0;width: 100%;border-bottom: 2px solid #69f;}

.date-box{font-size: 0;padding: 10rpx 0;width: 80%;margin: 0 auto;}

.date-box>view{position: relative;display: inline-block;width: 14.285%;color: #666;text-align: center;vertical-align: middle;}

.date-head{height: 60rpx;line-height: 60rpx;font-size: 12pt;}

.nowDay .date-head{width: 60rpx;border-radius: 50%;text-align: center;color: #fff;background-color: #ff9933;margin: 0 auto;}

日历效果图

PS：上面图中为在实际项目中的日历效果，上述代码则无蓝色波浪效果。