カレンダーを作る

<!DOCTYPE html>
<style>
td {
  text-align: right;
  line-height: 130%;
}
tr td:first-child {
  color: red;
}
tr td:last-child {
  color:blue;
}
tr td[colSpan]{
 text-align: center;
 color: green;
 padding-top:2ex;
}
</style>

<body>
<table id="T"></table>


<script>
let dt = new Date;
let y = dt.getFullYear (), m = dt.getMonth ()+1;

for (let i = 0; i < 5; i++) {
  T.append (calendar (y, m+i)) 
}

function calendar (y, m, t = document.createElement ('tbody')) {
  let A=Array,B='......',C=new Date(y,m,0),
      D=A.from(A(C.getDate()),(_,i)=>i+1),
      E=[[...D.splice(-C.getDay()-1),...B].slice(0,7)];
  while(D[0])E.unshift(D.splice(-7));
  E[0] = [...B, ...E[0]].slice(-7);
  E.unshift([`${y} / ${C.getMonth()+1}`]);
  
  E.forEach(r=>(r.reduce((_,c)=>((_.insertCell()).append(c),_),t.insertRow())));
  t.rows[0].cells[0].colSpan=7;
  return t;
}

</script>