如下效果：

html：

<div class="top flex flex-align-end flex-pack-center flex-warp">
			<div class="out-1 flex flex-align-center flex-pack-center" id="signIn">
				<div class="out-2 flex flex-align-center flex-pack-center">
					<div class="signBtn">
						<strong id="sign-txt">签到</strong>
						<span>连续<em id="sign-count">0</em>天</span>
					</div>
				</div>
			</div>
		</div>
		<div class="tips">今天已签到，获得1个积分</div>
		<div class="Calendar">
			<div id="toyear" class="flex flex-pack-center">
				<div id="idCalendarPre">&lt;</div>
				<div class="year-month">
					<span id="idCalendarYear">2018</span>年<span id="idCalendarMonth">6</span>月
				</div>
				<div id="idCalendarNext">&gt;</div>
			</div>
			<table border="1px" cellpadding="0" cellspacing="0">
				<thead>
					<tr class="tou">
						<td>日</td>
						<td>一</td>
						<td>二</td>
						<td>三</td>
						<td>四</td>
						<td>五</td>
						<td>六</td>
					</tr>
				</thead>
				<tbody id="idCalendar">
				</tbody>
			</table>
		</div>

 css:

.top {
    width: 100%;
    height: 12rem;
    background: #007aff;
    margin-bottom: .8rem;
    overflow: hidden;
  }
  .top .out-1 {
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    background: rgba(255, 255, 255, 0.4);
    margin: 1rem auto 0 auto;
  }
  .top .out-1 .out-2 {
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    background: #ffffff;
    margin: 0 auto;
  }
  .top .out-1 .out-2 .signBtn {
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    border: 1px #7ebdff solid;
  }
  .top .out-1 .out-2 .signBtn strong,
  .top .out-1 .out-2 .signBtn span {
    display: block;
    width: 85%;
    margin: 0 auto;
    text-align: center;
    color: #007aff;
  }
  .top .out-1 .out-2 .signBtn strong {
    height: 3.5rem;
    line-height: 4.5rem;
    font-weight: 600;
    border-bottom: 1px #eee solid;
  }
  .top .out-1 .out-2 .signBtn span {
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: .9rem;
    line-height: 2rem !important;
  }
  .top .out-1:active {
    animation: sign .25s forwards;
    -webkit-animation: sign .25s forwards;
  }
  .tips {
    position: absolute;
    top: 10rem;
    z-index: 999;
    width: 100%;
    color: #fff;
    font-size: .9rem;
    text-align: center;
    padding-bottom: .5rem;
  }
  .Calendar {
    background: #fff;
    padding-bottom: 1rem;
  }
  .Calendar #toyear {
    border-bottom: 1px #e7e7e7 solid;
    width: 96%;
    margin: 0 auto;
    height: 2.5rem;
    text-align: center;
    color: #333;
    font-size: .95rem;
  }
  .Calendar #toyear .year-month {
    height: 100%;
    line-height: 2.5rem;
  }
  .Calendar #toyear #idCalendarPre,
  .Calendar #toyear #idCalendarNext {
    height: 100%;
    line-height: 2.5rem;
    padding: 0 2rem;
    text-align: center;
    font-size: .85rem;
    color: #999;
  }
  .Calendar table,
  .Calendar tr,
  .Calendar td {
    border: 0;
  }
  .Calendar table {
    width: 96%;
    margin: 0 auto;
  }
  .Calendar table tr {
    text-align: center;
    height: 2rem;
  }
  .Calendar table tr td span {
    margin: 0 auto;
    display: block;
    line-height: 1.6rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: .9rem;
    border-radius: 100%;
  }
  .Calendar table tr .onToday span {
    background: #1485ff;
    color: #fff;
  }

 然后新建一个js文件，获取日期对象列表，设置默认属性，显示年月日，在页面中动态渲染出日历；

新建js：

var $$ = function(id){
    return "string" == typeof id ? document.getElementById(id):id;
};
var Class = {
    create:function(){
        return function(){
            this.initialize.apply(this, arguments);
        }
    }
}
Object.extend = function(destination, source){
    for(var property in source){
        destination[property] = source[property];
    }
    return destination;
}
var Calendar = Class.create();
Calendar.prototype = {
    initialize:function(container,options){
        this.Container = $$(container);//容器(table结垢)
        this.Days = []; //日期对象列表
        this.SetOptions(options);
        this.Year = this.options.Year;
        this.Month = this.options.Month;
        this.onToday = this.options.onToday;
        this.onSignIn = this.options.onSignIn;
        this.onFinish = this.options.onFinish;
        this.qdDay = this.options.qdDay;
        this.isSignIn = false;
        this.Draw();
    },
    //设置默认属性
    SetOptions:function(options){
        this.options = { //默认值
            Year: new Date().getFullYear(),//显示年
            Month:new Date().getMonth() +1, //显示月
            qdDay:null,
            onToday: function(){}, //已签到
            onSignIn:function(){}, //今天是否签到
            onFinish:function(){} //日历画完后触发
        };
        Object.extend(this.options,options || {});
    },
    //上一个月
    PreMonth:function(){
        //先取得上一个月的日期对象
        var d = new Date(this.Year,this.Month - 2, 1);
        //在设置属性
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        //重新画日历
        this.Draw();
    },
    //下一个月
    NextMonth:function(){
        var d = new Date(this.Year, this.Month, 1);
        this.year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        this.Draw();
    },
    //画日历
    Draw:function(){
        //签到日期
        var day = this.qdDay;
        //日期列表
        var arr = [];
        //用当月第一天在一周中的日期值作为当月离第一天的天数
        for(var i = 1, firstDay = new Date(this.Year,this.Month - 1, 1).getDay(); i <= firstDay; i++){
            arr.push("&nbsp;");
        }
        //用当月最后一天在一个月中的日期值作为当月的天数
		for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++) {
			arr.push(i);
		}
        var frag = document.createDocumentFragment();
        this.Days = [];
        while(arr.length > 0){
            //每个星期插入一个tr
            var row = document.createElement('tr');
            //每个星期有七天
            for(var i = 1; i <=7; i++){
                var cell = document.createElement('td');
                cell.innerHTML = "&nbsp;";
                if(arr.length > 0){
                    var d = arr.shift();
                    cell.innerHTML = "<span>" + d + "</span>";
                    if (d > 0 && day.length){
                        for(var ii = 0; ii < day.length; ii++){
                            this.Days[d] = cell;
                            //已签到
                            if(this.IsSame(new Date(this.Year, this.Month - 1, d), day[ii])) {
								this.onToday(cell);
							}
                            //判断今天是否签到
                            if(this.checkSignIn(new Date(),day[ii])){
                                this.onSignIn();
                            }
                        }
                    }
                }
                row.appendChild(cell);
            }
            frag.appendChild(row);
        }
        //先清空内容再插入(ie的table不能用innerHTML)
        while(this.Container.hasChildNodes()){
            this.Container.removeChild(this.Container.firstChild);
        }
        this.Container.appendChild(frag);
        this.onFinish();
        if(this.isSignIn){
            this.isSignIn = false;
            return this.SignIn();
        }
    },
    //是否签到
	IsSame: function(d1, d2) {
		d2 = new Date(d2 * 1000);
		return(d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
	},
	//今天是否签到
	checkSignIn: function(d1, d2) {
		d2 = new Date(d2 * 1000);
		return(d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
	},
	//签到
	SignIn: function() {
		var now = new Date();
		var Year = now.getFullYear();
		var Month = now.getMonth() + 1;
		if(Year != this.Year || Month != this.Month) {
			this.Year = Year;
			this.Month = Month;
			this.isSignIn = true;
			return this.Draw();
		}
		var day = now.getDate();
		var arr = new Array();
		var tb = document.getElementById('idCalendar');
		for(var i = 0; i < tb.rows.length; i++) {
			for(var j = 0; j < tb.rows[i].cells.length; j++) {
				if(day == tb.rows[i].cells[j].innerText && Year == this.Year && Month == this.Month) {
					if(tb.rows[i].cells[j].className == "onToday"){
						return 2;
					}
					tb.rows[i].cells[j].className = "onToday"
					this.qdDay.push(Date.parse(new Date()) / 1000)
					return 1;
					
				}
			}
		}
	}
}

获取签到数组，添加今天签到 

            var isSign = false;
			var myday = new Array(); //已签到的数组

			var cale = new Calendar("idCalendar", {
				qdDay: myday,
				onToday: function(o) {
					o.className = "onToday";
				},
				onSignIn: function (){
					$$("sign-txt").innerHTML = '已签到';
				},
				onFinish: function() {
					$$("sign-count").innerHTML = myday.length //已签到次数
					$$("idCalendarYear").innerHTML = this.Year;
					$$("idCalendarMonth").innerHTML = this.Month; //表头年份

				}
			});
			$$("idCalendarPre").onclick = function() {
				cale.PreMonth();
			}
			$$("idCalendarNext").onclick = function() {
				cale.NextMonth();
			}
			//添加今天签到
			$$("signIn").onclick = function() {
				if(isSign == false) {
					var res = cale.SignIn();
					if(res == '1') {
						$$("sign-txt").innerHTML = '已签到';
						$$("sign-count").innerHTML = parseInt($$("sign-count").innerHTML) + 1;
						isSign = true;
					} else if (res == '2'){
						$$("sign-txt").innerHTML = '已签到';
						alert('今天已经签到了')
					}
				} else {
					alert('今天已经签到了')
				}

			}