This calendar is developed in a component-based manner by mini-programs. Interested students can quote this component (I won’t elaborate on how to quote it, go to the WeChat mini-program development API to learn about it)
wxml
<!--pages/components/-->
<view class='calender'>
<view class='operate'>
<text catchtap='reduce'>reduce</text>
<text catchtap="add">Increase</text>
</view>
<view class='year'>
<text>{{year}}Year</text>
<text>{{currentMonth}}moon</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/
Component({
data:{
weekArr:["day","one","two","three","Four","five","six"],
yearMonth:[],
rowNum:"",
dateArr:[],
currentMonth:"",
year:"",
weekNum:""
},
created:function(){},
attached:function(){
let T = new Date()
({
currentMonth: () + 1,
year: ()
})
//Judge leap yearlet yeartype = ( % 4 == 0) && ( % 100 != 0 || % 400 == 0)
if ( yeartype ){
({
yearMonth: [31, 29 , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
})
}else{
({
yearMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
})
}
let currentMonthDay = + "-" + +"-01"
let weekStr = ""
({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: (([] + new Date(currentMonthDay).getDay())/7)
})
for( let i=0 ; i< ; i++ ){
for( let j = 0 ; j<7 ; j++ ){
(i*7+j)
}
}
({
dateArr:
})
},
methods:{
//Get the next monthadd:function(){
("addone")
({
dateArr: []
})
if (==12 ){
({
currentMonth: 1,
year:+1
})
}else{
({
currentMonth: + 1
})
}
let currentMonthDay = + "-" + + "-01"
let weekStr = ""
({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: (([-1] + new Date(currentMonthDay).getDay()) / 7)
})
for (let i = 0; i < ; i++) {
for (let j = 0; j < 7; j++) {
(i * 7 + j)
}
}
({
dateArr:
})
},
//Get the previous monthreduce:function(){
("reduceone")
({
dateArr:[]
})
if ( == 1) {
({
currentMonth: 12,
year: - 1
})
} else {
({
currentMonth: - 1
})
}
let currentMonthDay = + "-" + + "-01"
let weekStr = ""
({
weekNum: new Date(currentMonthDay).getDay(),
rowNum: (([-1] + new Date(currentMonthDay).getDay()) / 7)
})
for (let i = 0; i < ; i++) {
for (let j = 0; j < 7; j++) {
(i * 7 + j)
}
}
({
dateArr:
})
()
}
}
})
wxss
/* pages/components/ */
.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;
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.