JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
td { /* Stilim i qelizave te tabeles */
background-color: #7efff5;
text-align: center;
vertical-align: middle;
font-size: 15px;
height: 30px;
width: 50px;
font-weight: bold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(var i=2020;i>=1900;i--){ // Mbushja Option Box me vitet
$('#viti').append('<option>'+i+'</option>');
}
for(var i=1;i<=31;i++){ // Mbushja Option Box me ditet
$('#dita').append('<option>'+i+'</option>');
}
$("#shfaq").click(function(){
$('#tab').html('<table id="tab" style=" margin:150px" border="1" ></table>');
// Ndertimi i tabeles
var tdid=1; // Variabel per id e qelizave
$('#tab').append('<tr><td>Hene</td><td>Marte</td><td>Merkure</td><td>Enjte</td><td>Premte</td><td>Shtune</td><td>Diele</td></tr>');
for(var i=1;i<7;i++){
$('#tab').append('<tr></tr>');
for(var j=1;j<8;j++){
tdid++;
$('#tab').append('<td id='+tdid+'> </td>');}} // Ndertimi i qelizave me id=tdid
viti=$("#viti").val();
muaji=$("#muaji").prop('selectedIndex');
dita=$("#dita").val();
var data=new Date(viti,muaji,dita);
var nrdite=new Date(viti,muaji,0).getDate(); // Gjej ditet e muajit 1-31
var pozicioni=new Date(data.getFullYear(),data.getMonth(),1).getDay(); // Ruajme pozicionin e dates 1 te muajit nga 0-6
// 0:Shtune 1:Hene 2:Marte 3:Merkure 4:Enjte 5:Premte 6:Diele
// E Pershtasim si me poshte
// 1:Hene 2:Marte 3:Merkure 4:Enjte 5:Premte 6:Shtune 7:Diele
if(pozicioni==0){ // Nese pozicioni i dites eshte 0 ...