一个用原生JavaScript实现的日历小工具，开箱即用

----------------

用原生JavaScript实现的一个日历小工具，开箱即用，可用于做签到记录、日程等显示控件，具体自己发挥啦

效果如下图，可以自行美化

  >>点击体验<<

<div id="signinRecord" class="">err</div>

<style>
.selectedDate{
    border-radius: 50%;
    border:solid rgb(123, 155, 226) 1px;
}
#signinRecord table td{
    padding: 2px;
    text-align: center;
}
</style>

<script>

var ajaxData = '[{"id":1,"userid":41,"signintime":"2019-04-22 07:48:53"},{"id":10,"userid":41,"signintime":"2019-04-23 14:45:18"},{"id":11,"userid":41,"signintime":"2019-04-24 11:02:56"}]';

/**
 * 一个原生JavaScript写的日历小工具
 * @outhor l-jirong@qq.com 
 */

//获取当月的天数
function _getCountDays(date,month){
    var date = new Date(date);
    date.setMonth(month);
    date.setDate(0);

    return date.getDate(0);
}

//月份加减
function _monthAddOrSub(_date,type){
    var date = new Date(_date);
    var month = date.getMonth()+1;
    var year = date.getFullYear();
    if(type == 'addition'){
        if((month+1) == 13){
            month = 1;
            year = year+1;
        }else{
            month++;
        }
    }else if(type == 'subtraction'){
        if((month-1) == 0){
            month = 12;
            year = year-1;
        }else{
            month--;
        }
    }
    return year+"-"+month;

}

/**
 * 
 * @param  {[array]} 		data          	[请求到的数据]
 * @param  {[date string]} 	_calendarMonth 	[可忽略]
 * @return {[type]}                			[]
 */
function _buildCalendar(data,_calendarMonth){
    var date = data.length>0?new Date(data[0].signintime):(new Date(_calendarMonth));
    var month = (date.getMonth()+1);
    var firstDate = date.getFullYear()+"-"+month+"-"+1;
    var countdays = _getCountDays(date,month);
    var signedIn = Array();
    var firstDay = (new Date(firstDate)).getDay();
    var signedInTarget = "";

    var html = "<div class='name'>签到记录:&nbsp;&nbsp;本月已签到"+data.length+"天</div>";
    html += "<table><tr>";
    html += " <td colspan=4 id='calendarMonth'>"+date.getFullYear()+"-"+month+"</td><td class='changeMonthBtn' id='preMonth'>上月</td><td class='changeMonthBtn' id='nextMonth'>下月</td></tr><tr>";
    html += " <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr><tr>";

    //数据里的日期添加标记，不需要可以删除
    for(var i=0;i<data.length;i++){
        signedIn.push((new Date(data[i].signintime)).getDate());
    }

    for(var d=1;d<=(countdays+firstDay);d++){
        if((signedIn.indexOf(d-firstDay))!=-1){
            signedInTarget = "class='selectedDate'";					
        }else{
            signedInTarget = "";			
        }	

        if(d<=(firstDay)){
            html += "<td></td>";
        }else if(d%7==0){
            html += "<td "+signedInTarget+">"+(d-firstDay)+"</td></tr><tr>";
        }else{
            html += "<td "+signedInTarget+">"+(d-firstDay)+"</td>";
        }

    }
    
    html += "</table>";
    document.querySelector("#signinRecord").innerHTML=html;

    //切换签到记录月份
    var changeMonthBtn = document.getElementsByClassName("changeMonthBtn");
    for(var b=0;b<changeMonthBtn.length;b++){
        changeMonthBtn[b].onclick = function(){
            var calendarMonth = document.querySelector("#calendarMonth");
            var cmDate = new Date(calendarMonth.innerText);	
            var cYear = cmDate.getFullYear();
            var cMonth = cmDate.getMonth()+1;
            var startTime,endTime;	

            startTime = cYear+"-"+cMonth;
            endTime = cYear+"-"+cMonth;

            if(this.id == 'preMonth'){
                startTime = _monthAddOrSub(startTime,'subtraction');
            }else if(this.id == 'nextMonth'){
                startTime = _monthAddOrSub(startTime,'addition');
                endTime = _monthAddOrSub(endTime,'addition');
                endTime = _monthAddOrSub(endTime,'addition');
            }
            
            if((new Date(startTime))>(new Date())){
                alert((new Date(startTime).getMonth()+1)+'月还没到！');
                return false;
            }
            calendarMonth.innerText = startTime;
            //ajax request ···
            ajaxData = new Array();
            _buildCalendar(ajaxData,calendarMonth.innerText);
        };
    }

}

_buildCalendar(JSON.parse(ajaxData));
</script>