此日历由小部件组件开发。有兴趣的学生可以引用此组件。（如何引用此组件没有太多细节，请访问微信小部件开发API以了解。）
wxml
<!--pages/components/calender.wxml-->
<view class='calender'>
<view class='operate'>
< text catchtap ='reduce'> reduce </text >
<text catchtap= "add">add </text>
</view>
<view class='year'>
< text > {year} year </text >
< text > {current Month} month </text >
</view>
<view class='week'>
<block wx:for="{{weekArr}}" wx:key="{{index}}">
<text>{{item}}</text>
</block>
</view>
<view class='date'>
<block wx:for="{{dateArr}}" wx:key="{{index}}">
<text>{{item-(weekNum-1)<=0?"":item-(weekNum-1)>yearMonth[currentMonth-1]?"":item-(weekNum-1)}}</text>
</block>
</view>
</view>
JS
// pages/components/calender.js
Component({
data:{
WeekArr: ["Day", "One", "Two", "Three", "Four", "Five", "Six"],
yearMonth:[],
rowNum:"",
dateArr:[],
currentMonth:"",
year:"",
weekNum:""
},
created:function(){},
attached:function(){
let T = new Date()
this.setData({
currentMonth: T.getMonth() + 1,
year: T.getFullYear()
})
// Judging leap year
let yeartype = (this.data.year % 4 == 0) && (this.data.year % 100 != 0 || this.data.year % 400 == 0)
if ( yeartype ){
this.setData({
yearMonth: [31, 29 , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
})
}else{
this.setData({
yearMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
})
}
let currentMonthDay = this.data.year + "-" + this.data.currentMonth +"-01"
let weekStr = ""
this.setData({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth] + new Date(currentMonthDay).getDay())/7)
})
for( let i=0 ; i<this.data.rowNum ; i++ ){
for( let j = 0 ; j<7 ; j++ ){
this.data.dateArr.push(i*7+j)
}
}
this.setData({
dateArr:this.data.dateArr
})
},
methods:{
// Get next month
add:function(){
this.triggerEvent("addone")
this.setData({
dateArr: []
})
if (this.data.currentMonth==12 ){
this.setData({
currentMonth: 1,
year:this.data.year+1
})
}else{
this.setData({
currentMonth: this.data.currentMonth + 1
})
}
let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"
let weekStr = ""
this.setData({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth-1] + new Date(currentMonthDay).getDay()) / 7)
})
for (let i = 0; i < this.data.rowNum; i++) {
for (let j = 0; j < 7; j++) {
this.data.dateArr.push(i * 7 + j)
}
}
this.setData({
dateArr: this.data.dateArr
})
},
// Get the last month
reduce:function(){
this.triggerEvent("reduceone")
this.setData({
dateArr:[]
})
if (this.data.currentMonth == 1) {
this.setData({
currentMonth: 12,
year: this.data.year - 1
})
} else {
this.setData({
currentMonth: this.data.currentMonth - 1
})
}
let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"
let weekStr = ""
this.setData({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth-1] + new Date(currentMonthDay).getDay()) / 7)
})
for (let i = 0; i < this.data.rowNum; i++) {
for (let j = 0; j < 7; j++) {
this.data.dateArr.push(i * 7 + j)
}
}
this.setData({
dateArr: this.data.dateArr
})
console.log(this.data.dateArr)
}
}
})
wxss
/* pages/components/calender.wxss */
.operate{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 32rpx;
color:#000;
padding-bottom: 40rpx;
}
.year{
padding:0 30%;
display: flex;
flex-direction: row;
justify-content: space-around;
font-size:32rpx;
color:#404040;
margin-bottom: 40rpx;
}
.calender{
display: flex;
flex-direction: column;
padding:0 4.5%;
width:91%;
border-top:1rpx solid #eaeaea;
padding-top:30rpx;
color:#404040;
}
.calender .week{
display: flex;
flex-direction: row;
}
.calender .week text{
width:14%;
text-align: center;
font-size:26rpx;
}
.calender .date text{
width:14%;
display: inline-block;
text-align: center;
font-size:26rpx;
color:#000;
}
以上是本文的全部内容。
南京小程序开发小编希望它对每个人的学习都有所帮助。
