JSFiddle - React, Tailwind, and code Playground

Cal_01

by Dave

HTML

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


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

  
</table></td>





<td colspan="1"></td><td colspan="4">September</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;
}
.dScroll {
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')){alert('do this');event.stopPropagation()}
if (this.classList.contains('dn')){alert('do that');event.stopPropagation()}
if (this.classList.contains('bb')){alert(this.innerText)}
//else {alert(this.innerText)}
});
});

}


function myFunc() {
var aw = parseInt(document.querySelector(".ddff").innerText);
zzzz(aw);
//document.querySelector(".dScroll").style.display = "block"//;event.stopPropagation();
}

function 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('.dScroll');
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' )
//alert(document.querySelector(".ddff").innerText)
//alert(document.getElementsByClassName("aa")[1].innerText)
});
}