<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>

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

        });

    },

});

.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;

}