JSFiddle - React, Tailwind, and code Playground

Cal_03

by Dave

HTML

<div>
<table class="dPick_cal" onclick="document.querySelector('.yerScroll').style.display = 'none'">
<tr class="" style=""><td class="ddff" colspan="2" onclick="myFunc();ddd();event.stopPropagation()">2019

<table class="yerScroll" style="" onclick="ddd()">

</table></td>

<td colspan="1"></td><td colspan="4">September

<table class="calScroll" style="" onclick="ddd()">

</table></td></tr>
<tr class="" style=""><td>&lt;&lt;</td><td>&nbsp;&lt;</td><td colspan="3">Today</td><td>&gt;&nbsp;</td><td>&gt;&gt;</td></tr>
<tr class="" style=""><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>
<tr class="" style=""><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>
</table>
</div>
<input class="zzdScroll" type="button" value="change" onclick="myFunc()">

CSS

.dPick_cal {
border-collapse: collapse;
text-align:center;
}
.dPick_cal tr:nth-child(1) td {
/*border: solid thin;
border-color:#000;*/
cursor:default;
}
.dPick_cal tr:nth-child(2) td {
cursor:default;
}
.yerScroll {
position: absolute;
/*position: relative;*/
background-color:red;
display:none;
}

JavaScript

window.onload = function () {
//document.querySelectorAll('.aa').forEach(function(el){
//el.addEventListener('click', function() {
//alert(this.innerText);
//});
//});

}
function ddd(){


document.querySelectorAll('.aa').forEach(function(el){
el.addEventListener('click', function() {
////////////////////////////////////////////////
if (this.classList.contains('up')){
//if (this.classList.contains('up')){
var aaw = parseInt(this.parentElement.nextElementSibling.querySelector('TD').innerText) - 1
document.querySelectorAll('.bb').forEach(function(el){
el.innerText = aaw++
});event.stopPropagation()
}
////////////////////////////////////////////////
if (this.classList.contains('dn')){alert('do that');event.stopPropagation()}
////////////////////////////////////////////////
if (this.classList.contains('bb')){alert(this.innerText).event.stopPropagation()}
////////////////////////////////////////////////
});
});

}

function myFunc() {
var aw = parseInt(document.querySelector(".ddff").innerText);
//zzzz(aw);
var a = aw-1,b = aw,c = aw+1,d = aw+2,e = aw+3,f = aw+4,g = aw+5,h = aw+6,i = aw+7,j = aw+8
//alert(aw)
var elements = document.querySelectorAll('.yerScroll');
elements.forEach(function(showhide){  
//showhide.value = 'text';
(showhide.innerHTML = '<tr><td class="aa up">up</td></tr><tr><td class="aa bb">'+a+'</td></tr><tr><td class="aa bb">'+b+'</td></tr><tr><td class="aa bb">'+c+'</td></tr><tr><td class="aa bb">'+d+'</td></tr><tr><td class="aa bb">'+e+'</td></tr><tr><td class="aa bb">'+f+'</td></tr><tr><td class="aa bb">'+g+'</td></tr><tr><td class="aa bb">'+h+'</td></tr><tr><td class="aa bb">'+i+'</td></tr><tr><td class="aa bb">'+j+'</td></tr><tr><td class="aa dn">dn</td></tr>');
(showhide.style.display = showhide.style.display == "block" ?  "none" : "block" )
//event.stopPropagation();
//(showhide.style.display = 'block'...