微信小程序----最最最最最简单的日历做法

微信小程序—-最最最最最简单的日历做法
写这篇文章的时候时间是2018/8/16，该日历写法但求界面简单，实现功能，如果需要更华丽的效果或者其他界面请自行更改，8月份日历效果图：

默认从1号开始排序，第一行的星期数随月份变化。
代码：

//js
var today = new Date()
var c = parseInt(today.getFullYear() / 100)
var m = today.getMonth()+1
var d = today.getDate()
var y = today.getFullYear() - c*100
var mm = m
if(m==1||m==2){
    switch(m){
        case 1:m=13,y--;break;
        case 2:m=14,y--;break;
    }
}
while(d!=1){
    d--
}
var w = y + parseInt(y / 4) + parseInt(c / 4) - 2 * c + parseInt((26 * (m + 1) / 10)) + d - 1
if(w<0)
{
    w=(w%7+7)%7;
}
else if(w>0){
    w=w%7
}
var mday;
if (mm == 1 || mm == 3 || mm == 5 || mm == 7 || mm == 8 || mm == 10 || mm == 12 ){
    mday=31;
}
else if (mm == 4 || mm == 6 || mm == 9 || mm == 11){
    mday=30;
}
else if(mm==2){
    if (today.getFullYear() % 4 == 0 && today.getFullYear() % 100 != 0){
        mday=29;
    }
    else{
        mday=28;
    }
}
Page({
    data: {
        hang: [{}, {}, {}, {}, {}, {}],
        lie: [],
        week: ['日','一', '二', '三', '四', '五', '六' ]//0 1 2 3 4 5 6
    },
    onLoad: function (options) {
        var txt = this
        var num = 1;
        for (var i = 0; i < 6; i++) {
            for (var ii = 0; ii < 7; ii++) {
                if (num <= mday) {
                    txt.setData({
                        ['lie[' + ii + '][' + i + ']']: num
                    })
                }
                else if (num > mday) {
                    txt.setData({
                        ['lie[' + ii + '][' + i + ']']: ''
                    })
                }
                num++
            }
        }
        var jj = 0;
        for (var j = 0; j < 7; j++) {
            if (w < 7) {
                txt.setData({
                    ['lie[' + j + '][5]']: txt.data.week[w]
                })
                w++;
            }
            else if (w >= 7) {
                txt.setData({
                    ['lie[' + j + '][5]']: txt.data.week[jj]
                })
                jj++
            }
        }
    },
})
//2018/8/16/19:50修改

//wxml
<view class='rili'>
    <block wx:for="{{hang}}" wx:for-item="hang" wx:for-index="hangid" wx:key="hangkey">
        <view class='hang'>
            <block wx:for='{{lie}}' wx:for-item='lie' wx:for-index='lieid' wx:key='liekey'>
                    <text class='txt' wx:if="{{hangid==0}}">{{lie[hangid+5]}}text>
                    <text class='txt' wx:if="{{hangid==1}}">{{lie[hangid-1]}}text>
                    <text class='txt' wx:if="{{hangid==2}}">{{lie[hangid-1]}}text>
                    <text class='txt' wx:if="{{hangid==3}}">{{lie[hangid-1]}}text>
                    <text class='txt' wx:if="{{hangid==4}}">{{lie[hangid-1]}}text>
                    <text class='txt' wx:if="{{hangid==5}}">{{lie[hangid-1]}}text>
            block>
        view>
    block>
view>

//wxss
.rili{
    width: 100%;
    background-color: pink;
}
.hang{
    width: 100%;
    height: 100rpx;
    background-color: pink;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex: 1;
}
.txt{
    width: 70rpx;
    height: 70rpx;
    color: #ffffff;
}

日历的实现主要运用蔡勒公式。
注：仅适用1582年（中国明朝万历十年）10月15日之后的时间。
欢迎转载，注明出处即可。喜欢的点赞