钉钉E应用(小程序)之日历

唠叨几句：其实钉钉E应用的编写类似支付宝小程序（毕竟是阿里爸爸下的产业），而支付宝小程序又是借鉴微信小程序（只不过人家是wxml / wxss ,他是 axml / acss罢了），这三者可以说是同源了(大概)。只要熟悉微信小程序的，看着文档开发钉钉E应用便木有什么难度!!!

效果：

axml

<view class="page">
    <text class="toptip"> 显示可选择的天数：{{booklist_len}}天
    </text>
    <view class='box1' style='width: {{ sysW * 7 }}rpx'>
        <view class='dateBox'>{{ year }} 年 {{ month}} 月
        </view>
        <view class="weeklist">
            <block a:for='{{ weekArr }}'>
                <view key="{{item}}" style='width: {{ sysW }}rpx; height: {{ sysW }}rpx; line-height: {{ sysW }}rpx;'>
                    {{ item }}
                </view>
            </block>
        </view>
        <view class="daylist">
        </view>
        <block a:for='{{ arr }}'>
            <view class="isrela" key="{{item}}">
                <view
                    style='{{ index == 0 ? "margin-left:" + sysW * marLet + "rpx;" : "" }}width: {{ sysW }}rpx; height: {{ sysW }}rpx; line-height: {{ sysW }}rpx;'
                    class='{{ item.isbook?"isbook":"nobook"}}'>{{ item.day }}
                </view>
                <view class='{{item.day == getDate ? "dateOn" : "" }}'>
                </view>
            </view>
        </block>
    </view>
</view>

 

js

Page({
    data: {
        arr: [],
        sysW: null,
        lastDay: null,
        firstDay: null,
        weekArr: ['日', '一', '二', '三', '四', '五', '六'],
        year: null,
　　　　　//选中的日期,高亮显示
        booklist: ["1", "3", "10", "20", "23", "24", "25", "26"],
        booklist_len: '',
    },
    //获取日历相关参数
    dataTime: function () {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var months = date.getMonth() + 1;

        //获取现今年/月/日/几号/星期几
        this.data.year = year;
        this.data.month = months;
        this.data.getDate = date.getDate();
        var d = new Date(year, months, 0);
        this.data.lastDay = d.getDate();
        let firstDay = new Date(year, month, 1);
        this.data.firstDay = firstDay.getDay();
    },

    onShow: function (options) {
        this.dataTime();

        //先清空数组，根据得到今月的最后一天日期遍历 得到所有日期
        if (this.data.arr) {
            this.data.arr = [];
        }
        for (var i = 0; i < this.data.lastDay; i++) {
            var obj = {};
            obj.day = i + 1;
            this.data.arr.push(obj);
            for (var j = 0; j < this.data.booklist.length; j++) {
                if (this.data.arr[i].day == this.data.booklist[j]) {
                    this.data.arr[i].isbook = 1
                }
            }
        }
        var res = dd.getSystemInfoSync();
        this.setData({
            sysW: res.windowHeight / 6.5,
            marLet: this.data.firstDay,
            arr: this.data.arr,
            year: this.data.year,
            getDate: this.data.getDate,
            month: this.data.month,
            booklist_len: this.data.booklist.length
        });
    },
});

 

acss

.toptip {
    font-size: 34rpx;
    color: #aaa;
}

.box1 .dateBox {
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    margin-top: 40rpx;
    font-size: 50rpx;
    color: #282828;
}

.box1 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.box1>view {
    text-align: center;
    font-size: 34rpx;
}

.isrela {
    position: relative;
}

.weeklist {
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    border-bottom: 1rpx solid #d0d0d0;
    color: #333;
}

.dateOn {
    position: absolute;
    bottom: 10rpx;
    left: 50%;
    width: 10rpx;
    height: 10rpx;
    margin-left: -3rpx;
    border-radius: 50%;
    background-color: blue;
}

.isbook {
    box-sizing: border-box;
    color: #3777b1;
    background-color: #9cbbd1;
    border: 1rpx solid #fff;
}

.nobook {
    color: #555;
}

 注：转载请标明出处...