一个简单日历的实现（以小程序为例）

最近做的小程序，有个页面要求展示日历。于是，结合网络上的一些文章，做了一个简单版，即拿即用。

效果图：

js代码：

逻辑都写在注释中，这里就不啰嗦了。

        const dat = new Date(); // 今天的标准时间
        const timeY = dat.getFullYear() // 本年度
        const timeM = dat.getMonth()// 本月，注意值是0-11
        const timeD = dat.getDate() // 日期
        // 获取本月长度
        const start = new Date(timeY,timeM,1) // 本月第一天的中国标准时间，
        console.log(start);//Fri Nov 01 2019 00:00:00 GMT+0800
        const end = new Date(timeY,timeM+1,0) // 本月最后一天的中国标准时间
        console.log(end);
        const thisMLastD = end.getDate() // 本月最后一天的日期，也是本月的长度
        // 获取下个月的第一天
        const nextFirst = new Date(timeY,1); // 下个月第一天的标准时间
        const nextFirstW = nextFirst.getDay(); // 下个月第一天的星期数，周天是0，其他跟星期几一致
        console.log(nextFirstW);

        const lastMLast = new Date(timeY,0) // 上个月最后一天的中国标准时间
        const lastMLastW = lastMLast.getDay(); // 上个月最后一天的星期数,+1就是上个月要展示的天数
        const lastMLength = lastMLast.getDate(); // 上个月最后一天的日期数
        console.log(lastMLength)
        console.log(lastMLastW)
        // 上月要展示的数组
        let lastMonthDate = []
        // 由于星期日排第一位，上个月要展示的日期数量应该是上个月最后一天星期数+1，比如最后一天是周四，那就展示5天
        for (var i = 0; i< lastMLastW+1; i++ ) {
            let index = lastMLength - lastMLastW + i // 上个月总长度减去上月最后一天的星期数等于上月应该展示的第一天的日期数
            let item = {num:index}
            console.log(item)
            lastMonthDate.push(item);
        }
        console.log(lastMonthDate)

        // 本月要展示的数组
        let thisMonthDate = []
        for (var i = 0; i< thisMLastD + 1; i++ ) {
            let item = {num:i}
            console.log(item)
            thisMonthDate.push(item);
        }
        console.log(thisMonthDate)

        // 下月要展示的数组
        let nextMonthDate = []
        if (nextFirstW !== 0) { // 为0说明是周天，也就没必要展示下月了
            for (let i = 0; i < 7 - 2; i++) {
            let item = {num:i+1}
                nextMonthDate.push(item)
            }
        }
        console.log(nextMonthDate)
        
        //页面中做三个循环，依次循环lastMonthDate、thisMonthDate和nextMonthDate。
        // 为啥要搞成数组，不根据月份长度直接循环？
        // 方便做UI，毕竟一般日历肯定都是某些日期会有状态的，比如5号是生日，要加个背景色啥的，可以把状态值也添加进数组

复制代码

html代码(以小程序为例)

分为四个部分：星期（你做成数组循环也可以，这里直接写死）；上月日期，本月完整日期；下月日期。完整点的话，你可以自己做个判断，看上月和下月是否需要展示，比如上个月的最后一天刚好星期六，本月第一天正好星期天，那上月就没有展示必要了。

        <view>
        <ul>
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ul>
        <ul>
            /*li标签里不加view也行，看自己需要*/
            <li wx:for="{{lastMonthDate}}">
              <view class="calendar-view">{{item.num}}</view>
            </li>
            <li wx:for="{{thisMonthDate}}">
              <view class="calendar-view">{{item.num}}</view>
            </li>
            <li wx:for="{{nextMonthDate}}">
              <view class="calendar-view">{{item.num}}</view>
            </li>
        </ul>
    </view>
复制代码

css代码：

样式也很简单，浮动布局可以让li标签每铺满一行后自动换行。

        ul {
            width: 500px;
        }
        li {
            list-style-type: none;
            float: left;
            width: 13.6%;
            height: 20px;
        }
复制代码

回头有空会传到GitHub～欢迎关注 github.com/suosuojiang…