css部分样式：

      * {margin: 0;padding: 0;list-style: none;}li.disabled {background: #eee;color: #ccc;cursor: not-allowed;}.container {border: 1px solid #ccc;margin: 50px;width: 350px;}.container li {width: 50px;height: 50px;text-align: center;line-height: 50px;cursor: pointer;}.container li:not(.disabled):hover {background: rgb(185, 238, 238);}.container ul {display: flex;flex-wrap: wrap;}li.active {background: darkcyan;color: #fff;}

HTML部分：

<button class="prev">上月</button>
<button class="next">下月</button>
<div class="container"><ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='content'></ul>
</div>

js部分：

        $(function () {let totalDays = 0let now = new Date()let today = now.getDate()let global_month = now.getMonth() + 1let global_year = now.getFullYear()$('.prev').click(function () {now.setMonth(now.getMonth() - 1) //6-31  7-1initCalendar()})$('.next').click(function () {now.setMonth(now.getMonth() + 1) //6-31  7-1initCalendar()})function initCalendar() {$('.content').empty()let month = now.getMonth() + 1let year = now.getFullYear()switch (month) {case 1:case 3:case 5:case 7:case 8:case 10:case 12:totalDays = 31;break;case 4:case 6:case 9:case 11:totalDays = 30;break;default:if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {totalDays = 29;} else {totalDays = 28;}break;}for (let i = 1; i <= totalDays; i++) {let li = $('<li/>').text(i)if (i === today && year === global_year && month === global_month) li.addClass('active')$('.content').append(li)}now.setDate(1)let firstDay = now.getDay()for (let i = 0; i < firstDay; i++) {now.setDate(now.getDate() - 1)let li = $('<li/>').text(now.getDate()).addClass('disabled')$('.content').prepend(li)}now.setDate(now.getDate() + firstDay)now.setDate(totalDays)let lastDay = 6 - now.getDay()for (let i = 0; i < lastDay; i++) {now.setDate(now.getDate() + 1)let li = $('<li/>').text(now.getDate()).addClass('disabled')$('.content').append(li)}now.setDate(now.getDate() - lastDay)now.setDate(1)}initCalendar()})