思路分析
首先最主要的一点，就是要计算出某年某月有多少天，其中涉及到大小月，闰、平年二月。
其次，弄清楚每月一号对应的是周几。
然后，有时为填充完整，还需显示上月残余天数以及下月开始几天，这些又该如何展示。
最后，根据自己项目需求实现其它细枝末节。
新建calendar组件
calendar.wxml 日历代码
<view class="calendar">
<view class='tit'>
<view class='pre' bindtap='gotoPreMonth'>{{'<'}}</view>
<view class='current'>{{currentYear}}年{{currentMonth}}月</view>
<view class='next' bindtap='gotoNextMonth'>{{'>'}}</view>
</view>
<view class='content'>
<view>日</view>
<view>一</view>
<view>二</view>
<view>三</view>
<view>四</view>
<view>五</view>
<view>六</view>
<view wx:for="{{allArr}}" wx:key="{{index}}" class="{{item.month == 'current' ? '' : 'gray'}}">{{item.date}}</view>
</view>
</view>
calendar.wxss 日历样式
.calendar{
width: 100%;
}
.calendar .tit{
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
color: #2A2A2A;
padding: 40rpx 0;
}
.calendar .tit .current{
margin: 0 40rpx;
}
.calendar .content{
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding-left: 25rpx;
}
.calendar .content view{
width: 100rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
flex-shrink: 0;
font-size: 34rpx;
color: #2A2A2A;
margin: 14rpx 0;
}
.calendar .content .gray{
color: #999;
}
calendar.js
Component({
/**
* 组件的属性列表
*/
properties: {
currentYear: { // 当前显示的年
type: Number,
value: new Date().getFullYear()
},
currentMonth: { // // 当前显示的月
type: Number,
value: new Date().getMonth() + 1
}
},
/**
* 组件的初始数据
*/
data: {
currentMonthDateLen: 0, // 当月天数
preMonthDateLen: 0, // 当月中，上月多余天数
allArr:[], // 当月所有数据
},
ready(){
this.getAllArr()
},
/**
* 组件的方法列表
*/
methods: {
// 获取某年某月总共多少天
getDateLen(year, month) {
let actualMonth = month - 1;
let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);
return timeDistance / (1000 * 60 * 60 * 24);
},
// 获取某月1号是周几
getFirstDateWeek(year, month) {
return new Date(year, month - 1, 1).getDay()
},
// 上月 年、月
preMonth(year, month) {
if (month == 1) {
return {
year: --year,
month: 12
}
} else {
return {
year: year,
month: --month
}
}
},
// 下月 年、月
nextMonth(year, month) {
if (month == 12) {
return {
year: ++year,
month: 1
}
} else {
return {
year: year,
month: ++month
}
}
},
// 获取当月数据，返回数组
getCurrentArr(){
let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 获取当月天数
let currentMonthDateArr = [] // 定义空数组
if (currentMonthDateLen > 0) {
for (let i = 1; i <= currentMonthDateLen; i++) {
currentMonthDateArr.push({
month: 'current', // 只是为了增加标识，区分上下月
date: i
})
}
}
this.setData({
currentMonthDateLen
})
return currentMonthDateArr
},
// 获取当月中，上月多余数据，返回数组
getPreArr(){
let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 当月1号是周几 == 上月残余天数）
let preMonthDateArr = [] // 定义空数组
if (preMonthDateLen > 0) {
let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 获取上月 年、月
let date = this.getDateLen(year, month) // 获取上月天数
for (let i = 0; i < preMonthDateLen; i++) {
preMonthDateArr.unshift({ // 尾部追加
month: 'pre', // 只是为了增加标识，区分当、下月
date: date
})
date--
}
}
this.setData({
preMonthDateLen
})
return preMonthDateArr
},
// 获取当月中，下月多余数据，返回数组
getNextArr() {
let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天数
let nextMonthDateArr = [] // 定义空数组
if (nextMonthDateLen > 0) {
for (let i = 1; i <= nextMonthDateLen; i++) {
nextMonthDateArr.push({
month: 'next',// 只是为了增加标识，区分当、上月
date: i
})
}
}
return nextMonthDateArr
},
// 整合当月所有数据
getAllArr(){
let preArr = this.getPreArr()
let currentArr = this.getCurrentArr()
let nextArr = this.getNextArr()
let allArr = [...preArr, ...currentArr, ...nextArr]
this.setData({
allArr
})
let sendObj = {
currentYear: this.data.currentYear,
currentMonth: this.data.currentMonth,
allArr: allArr
}
// console.log(sendObj)
this.triggerEvent('sendObj', sendObj)
},
// 点击 上月
gotoPreMonth(){
let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth)
this.setData({
currentYear: year,
currentMonth: month
})
this.getAllArr()
},
// 点击 下月
gotoNextMonth() {
let { year, month } = this.nextMonth(this.data.currentYear, this.data.currentMonth)
this.setData({
currentYear: year,
currentMonth: month
})
this.getAllArr()
}
}
})
页面内使用
wxml
<calendar currentYear='2018' currentMonth="8" bindsendObj='getCalendarData'></calendar>
json
{
"usingComponents": {
"calendar": "/components/calendar/calendar"
}
}
网友评论