HTML+JavaScript+css 自定义日历列表

效果图：

html的body：

 <!-- 日期测试 -->
<h2 style="display: none;" id="calendar_year">2020</h2>
<div class="date_list">
    <div class="to_month date_click" id="calendar_month"></div>
    <ul id="days"></ul>
    <div class="date_click next" id="next"> > </div>
</div>

css:

.date_list{display: flex;font-size:12px;line-height: 18px;}
.date_click{display: inline-block;height:20px;padding: 2px 5px;cursor: pointer;}
.to_month{width:24px;color:#fff;border:1px solid #a8a8a8;background:#DCAC6C;}
.next{color:#fff;border:1px solid #a8a8a8;background:#b94a48;}
#days{list-style: none;display: flex;margin: 0;padding: 0;}
#days li{display: inline-block;width:18px;text-align:center;padding:3px 0;background:#fff;}
#days li:nth-child(even){background:#ddd;}
.before_day{color:#a8a8a8;}
.to_day{color:#6ac13c;border:1px solid #6ac13c;background:#e9f8df;}
.after_day{color:#565656;}

JavaScript

var month_leap = [31,29,31,30,31,30,31,31,30,31,30,31]; //闰年
var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];//平年
var month_name = ["1","2","3","4","5","6","7","8","9","10","11","12"];
var current_date = new Date();
var current_year = current_date.getFullYear();
var current_month = current_date.getMonth();
var current_day = current_date.getDate();
var prev = document.getElementById("calendar_month"); //控件（上一月）
var next = document.getElementById("next");  //控件（下一月）
var holder = document.getElementById("days");
var cmonth = document.getElementById("calendar_month");
var cyear = document.getElementById("calendar_year");
//计算某年是不是闰年，通过求年份除以4的余数即可
function daysMonth(month, year) {
   var tmp = year % 4;
   if (tmp == 0) {
       return (month_leap[month]);
   } else {
       return (month_normal[month]);
   }
}
function refreshDate(){
   var dateClass;
   var str = "";
   var totalDay = daysMonth(current_month,current_year); //获取该月总天数
   for(var i = 1; i <= totalDay; i++){
      if(i<current_day){
         dateClass = " class='before_day'"; //当天之前
      }else if (i == current_day){
         dateClass = " class='to_day'"; //当天
      }else{
         dateClass = " class='after_day'"; //当天之后
      }
      str += "<li"+dateClass+">"+i+"</li>"; //创建日期节点
   }
      holder.innerHTML = str; //设置日期显示
      cmonth.innerHTML = month_name[current_month]+"<sub>月</sub>"; //设置月份显示
      cyear.innerHTML = current_year; //设置年份显示
}
refreshDate(); //执行该函数
//上一月
prev.onclick = function(e){
  e.preventDefault();
  current_month--;
  if(current_month < 0){
     current_year--;
     current_month = 11;
  }
  refreshDate();
};
//下一月
next.onclick = function(e){
  e.preventDefault();
  current_month++;
  if(current_month > 11){
     current_year++;
     current_month = 0;
  }
  refreshDate();
}

当然，最后还要引入 jquery！年份被我隐藏了，哈嘿！

而且这是本人根据自身需求改造的，哈哈，是不是很特别

参考原文：HTML+JavaScript自己动手做日历