SOURCE

;(function(){
  Date.prototype.offsetDays = function(offset){
      return new Date(this.getTime() + offset * 86400000);
  }
  function pad(v,l){
    if(!l) l = 2;
    v = String(v);
    while(v.length < l) v = '0'+v;
    return v;
  }
  var dateClick = function(e){
    alert(e.target.getAttribute('value'));
  }
  var calen = document.querySelector('.calendar>table');
  var now = new Date();
  var fistDayOfMonth = new Date(now.getFullYear(),now.getMonth(),1);
  var lastDayOfMonth = new Date(now.getFullYear(),now.getMonth()+1,1).offsetDays(-1);
  var offset = fistDayOfMonth.getDay() % 7;
  var startDay = fistDayOfMonth.offsetDays(-offset);
  var totalDays = (lastDayOfMonth - startDay) / 86400000 + 1;
  var lines = Math.ceil(totalDays/7);
  for(var i = 0, day = startDay; i < lines; i++){
 		var trEl = document.createElement('tr');
    for(var j = 0; j < 7; j++){
      var td = document.createElement('td');
      if(day.getMonth() !== now.getMonth()) td.setAttribute('class','otherMonth');
      if(day.getMonth() === now.getMonth() && day.getDate() === now.getDate()) td.setAttribute('class','today');
      td.setAttribute('value',day.toLocaleDateString());
      td.onclick = dateClick;
      td.appendChild(document.createTextNode(pad(day.getDate())));
      trEl.appendChild(td);
      day = day.offsetDays(1);
    }
    calen.appendChild(trEl);
  }

})();

<div class="calendar">
  <table>
    <tr>
      <td>周日</td>
      <td>周一</td>
      <td>周二</td>
      <td>周三</td>
      <td>周四</td>
      <td>周五</td>
      <td>周六</td>
    </tr>
    
  </table>
</div>

.calendar{
  display:inline-block;
  border: 1px solid gray;
  border-radius: 3px;
  font-size: 0.8rem;
  padding:5px 10px 5px 5px;
}
.otherMonth{
  color: gray;
}
.today{
  background-color:red;
}
.calendar td{
  text-align:center;
}