最终效果

关键HTML

<div class="wrap">
        <div class="top">
            <div class="time1"></div>
            <div class="time2"></div>
        </div>
        <div class="bottom">
            <div class="control">
                <div class="time3"></div>
                <div>
                    <span class="up">∧</span>
                    <span class="down">∨</span>
                </div>
            </div>
            <div class="week">

            </div>
            <ul class="date">
            </ul>
        </div>
    </div>

CSS

* {
    padding: 0;
    margin: 0;
    list-style: none;
}

body {
    background: #333;
}

.wrap {
    width: 420px;
    margin: 100px auto;
    background: #2d2d2d;
    border: 1px solid #444;
}

.top {
    padding: 20px 35px;
    border-bottom: 1px solid #535353;
}

.time1 {
    font-size: 40px;
    color: #efefef;
}

.time2 {
    font-size: 14px;
    color: #999;
}

.bottom {
    padding: 20px 0;
    color: #efefef;
}

.control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    padding: 0 35px;
    margin-bottom: 15px;
}

.control div {
    padding-right: 5px;
}

.control div span {
    font-size: 20px;
    display: inline-block;
    transform: scaleX(1.7);
    margin-left: 33px;
    cursor: pointer;
}

.week {
    display: flex;
    padding: 0 20px;
}

.week span {
    flex: 1 1 auto;
    height: 40px;
    text-align: center;
}

.date {
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
}

.date li {
    width: 54px;
    height: 54px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

.date li:nth-child(2) {
    font-size: 14px;
}

.date li.color {
    color: #6e6e6e;
}

.date li.active {
    background: #0078d7;
}

JS

index.js：

var time1 = document.querySelector('.time1');
var time2 = document.querySelector('.time2');
var time3 = document.querySelector('.time3');
var week = document.querySelector('.week');
var date = document.querySelector('.date');
var up = document.querySelector('.up');
var down = document.querySelector('.down');

moment.locale('zh-cn');
// 即时时间
function getTime() {
    time1.innerHTML = moment().format('LTS');
}

setInterval(getTime, 1000);

// 即时日期
var time2Cn = window.calendar.solar2lunar(moment().year(), moment().month() + 1, moment().date());
// console.log(time2Cn);
time2.innerHTML = moment().format('LL') + ' ' + time2Cn.IMonthCn + time2Cn.IDayCn + ' ' + (time2Cn.Term ? time2Cn.Term : '');

// 星期
var weekDay = moment.weekdaysMin(true);
weekDay.forEach(function (item) {
    week.innerHTML += '<span>' + item + '</span>';
})

// 1号是星期几
function getFirstWeek(m) {
    return m.startOf('month').weekday();
}

// 某月有多少天
function getEndDay(m) {
    return m.daysInMonth();
}

function setDate(m) {
    var firstWeek = getFirstWeek(m.clone());
    // 当前月的天数
    var nowDays = getEndDay(m);
    // 上个月的天数
    var lastDays = getEndDay(m.clone().subtract(1, 'month'));
    // console.log(firstWeek, nowDays, lastDays);
    var str = '';
    var nextMonthDay = 1;
    for (var i = 0; i < 42; i++) {
        if (i < firstWeek) {
            str = '<li class="color">' +
                '<span>' + lastDays + '</span>' +
                '<span>' + getCnDay(m.year(), m.month(), lastDays) + '</span>' +
                '</li>' + str;
            lastDays--;
        } else if (i >= firstWeek + nowDays) {
            str += '<li class="color">' +
                '<span>' + nextMonthDay + '</span>' +
                '<span>' + getCnDay(m.year(), m.month() + 2, nextMonthDay) + '</span>' +
                '</li>';
            nextMonthDay++;
        } else {
            var cl = (i - firstWeek + 1) == m.date() ? 'active' : '';
            //var cl = (i - week + 1) == m.date() ? 'active' : '';
            //console.log(cl);
            if (m.year() != moment().year() || m.month() != moment().month()) {
                cl = '';
            }
            str += '<li class="' + cl + '">' +
                '<span>' + (i - firstWeek + 1) + '</span>' +
                '<span>' + getCnDay(m.year(), m.month() + 1, (i - firstWeek + 1)) + '</span>' +
                '</li>';
        }
    }
    time3.innerHTML = m.format('YYYY年MMM');
    date.innerHTML = str;
}

var today = moment();
setDate(today);

up.onclick = function () {
    setDate(today.subtract(1, 'month'));
}

down.onclick = function () {
    setDate(today.add(1, 'month'));
}

function getCnDay(year, month, day) {
    var dayCn = window.calendar.solar2lunar(year, month, day);
    var result = '';
    if (dayCn.IDayCn == '初一') {
        result = dayCn.IMonthCn;
    } else if (dayCn.Term) {
        result = dayCn.Term;
    } else if (dayCn.festival) {
        result = dayCn.festival;
    } else if (dayCn.lunarFestival) {
        result = dayCn.lunarFestival;
    } else {
        result = dayCn.IDayCn;
    }
    return result;
}

除此之外，还引入了moment-with-locales.js和calendar.js。

JS关键逻辑：

需要知道两个关键信息：

1. 本月和上个月的天数
2. 本月第一天是星期几