实现平铺日历

在这里插入代码片
 <div class="cms-box-content text-center  bg-light cms-list-search  p-2" id="year" style="font-size: 2rem;">
                <span data-id="subYear" style="cursor: pointer;">＜＜</span> &nbsp;&nbsp;&nbsp;<span class="text-primary"
                    data-id="titleYear">2019</span>&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;<span data-id="addYear"
                    style="cursor: pointer;">＞＞</span>
            </div>
              <div id="calender" class="clearfix">
        </div>
 <style>
            .unit {
                float: left;
                height: 250px;
                border: 1px solid #ddd;
                background-color: white;
                margin: 0 1%;
                margin-bottom: 20px;
                width: 23%;
            }

            .jinzhi {
                color: #aaa
            }

            th {
                text-align: center;
            }

            td {
                text-align: center;
                padding: 2px;
                cursor: pointer;
            }

            td span {
                display: block;
                width: 28px;
                height: 28px;
                text-align: center;
                line-height: 30px;
                margin: auto
            }

            table td .active {
                background-color: #2b99ff;
                border-radius: 50%;
            }

            .clearfix:before,
            .clearfix:after {
                content: " ";
                display: table;
            }

            .clearfix:after {
                clear: both;
            }

            .clearfix {
                *zoom: 1;
            }

            .trybox {
                width: 200px;
                height: 200px;
                background-color: tomato;
            }
        </style>
        <script>
        	var arr=[]
        	  function initCalendar (year) {
            var that = this;
            for (var i = 1; i < 13; i++) {
                var str = '<table class="unit"><thead><tr><td colspan="7" style="color:#007fbb;">' + i + ' 月</td></tr><tr><th data-value="0">日</th><th data-value="1">一</th><th data-value="2">二</th><th data-value="3">三</th>';
                str += '<th data-value="4">四</th><th data-value="5">五</th><th data-value="6">六</th></tr></thead><tbody><tr>';
                var datestr = year + '/' + i + '/1';
                var date = Number(new Date(datestr).getDay());
                if (i === 1 || i === 3 || i === 5 || i === 7 || i === 8 || i === 10 || i === 12) {
                    var endNum = (31 + date) > 35 ? 42 : 35;
                    for (var j = 0; j < endNum; j++) {
                        if (j % 7 === 0) {
                            if (j === 0) {
                                str += '';
                            } else {
                                str += '</tr><tr>';
                            }
                        }
                        if (j >= date && (j - date) < 31) {
                            str += '<td data-value=' + moment(year + '-' + i + '-' + (j + 1 - date)).format('YYYY-MM-DD') + '><span data-id="diydate">' + (j + 1 - date) + '</span></td>';
                        } else if (j - date >= 31) {
                            str += '<td class="jinzhi">' + (j - date - 30) + '</td>';
                        } else {
                            if (i === 5 || i === 7 || i === 10 || i === 12) {
                                str += '<td class="jinzhi">' + (31 + j - date) + '</td>';
                            } else if (i === 1 || i === 8) {
                                str += '<td class="jinzhi">' + (32 + j - date) + '</td>';
                            } else {
                                if (year % 100 === 0 && year % 400 === 0) {
                                    str += '<td class="jinzhi">' + (30 + j - date) + '</td>';
                                } else if (year % 100 !== 0 && year % 4 === 0) {
                                    str += '<td class="jinzhi">' + (30 + j - date) + '</td>';
                                } else {
                                    str += '<td class="jinzhi">' + (29 + j - date) + '</td>';
                                }
                            }
                        }
                    }
                } else if (i === 4 || i === 6 || i === 9 || i === 11) {
                    var endconditon = (30 + date) > 35 ? 42 : 35;
                    for (var k = 0; k < endconditon; k++) {
                        if (k % 7 === 0) {
                            if (k === 0) {
                                str += '';
                            } else {
                                str += '</tr><tr>';
                            }
                        }
                        if (k >= date && (k - date) < 30) {
                            str += '<td data-value=' + moment(year + '-' + i + '-' + (k + 1 - date)).format('YYYY-MM-DD') + '><span data-id="diydate">' + (k + 1 - date) + '</span></td>';
                        } else if (k - date >= 30) {
                            str += '<td class="jinzhi">' + (k - date - 29) + '</td>';
                        } else {
                            str += '<td class="jinzhi">' + (32 + k - date) + '</td>';
                        }
                    }
                } else {
                    var endNumber = (30 + date) > 28 ? 35 : 28;
                    var dayNum = 29;
                    if (year % 100 === 0 && year % 400 === 0) {
                        dayNum = 29;
                    } else if (year % 100 !== 0 && year % 4 === 0) {
                        dayNum = 29;
                    } else {
                        dayNum = 28;
                    }
                    for (var q = 0; q < endNumber; q++) {
                        if (q % 7 === 0) {
                            if (q === 0) {
                                str += '';
                            } else {
                                str += '</tr><tr>';
                            }
                        }
                        if (q >= date && (q - date) < dayNum) {
                            str += '<td data-value=' + moment(year + '-' + i + '-' + (q + 1 - date)).format('YYYY-MM-DD') + '><span data-id="diydate">' + (q + 1 - date) + '</span></td>';
                        } else if (q - date >= dayNum) {
                            str += '<td class="jinzhi">' + (q - date - dayNum + 1) + '</td>';
                        } else {
                            str += '<td class="jinzhi">' + (32 + q - date) + '</td>';
                        }
                    }
                }
                str += '</tr></tbody></table>';
                $('#calender').append(str);
            }
            $('td').each(function (index, item) {
                if ($(item).attr('data-value')) {
                    if (that.arr.indexOf($(item).data('value')) > -1) {
                        $(item).children().addClass('active');
                    }
                }
            });
        }
        initCalendar(2020);
         $('[data-id=diydate]').on('click', false, this.bind(function (e) {
                var value = $(e.currentTarget).parent().data('value');
                if ($(e.currentTarget).hasClass('active')) {
                    $(e.currentTarget).removeClass('active');
                    var index = this.arr.indexOf(value);
                    this.arr.splice(index, 1);
                } else {
                    $(e.currentTarget).addClass('active');
                    this.arr.push(value);
                }
            }));
        </script>