<!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>