JSFiddle - React, Tailwind, and code Playground

by Adil Heybətov

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="table-responsive">
  <table class="table calendarTable">
    <tbody></tbody>
  </table>
</div>

JavaScript

var currentDate = new Date();

function getDaysInMonth(month, year) {
  var date = new Date(year, month, 1);
  var days = [];
  while (date.getMonth() === month) {
    days.push(new Date(date));
    date.setDate(date.getDate() + 1);
  }
  return days;
}

var castingArr = ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180', '190', '200', '210', '220', '230', '240', '250', '260', '270', '280', '290', '300', '310'];
var dayNames = ["Bazar", "Bazar ertəsi", "Çərşənbə axşamı", "Çərşənbə", "Cümə axşamı", "Cümə", "Şənbə"];
var dayArr = getDaysInMonth(currentDate.getMonth(), currentDate.getFullYear());
var firstDay = dayArr[0].getDay();
var th = "";
var td = "";
var tr = "";
var allContent = "";
var count = 0;
$(dayNames).each(function(index, element) {
  th += "<th>" + element + "</th>";
});
tr = "<tr>" + th + "</tr>";
allContent += tr;

for (var j = 0; j < 6; j++) {
  for (var i = 0; i < 7; i++) {
    td += '<td id=' + count + '><div class="day"></div><a href="javascript:;"></a></td>';
    count++;
  }
  tr = "<tr>" + td + "</tr>";
  allContent += tr;
  td = "";
  tr = "";
}
$('.calendarTable tbody').html(allContent);

for (var i = 0; i < 43; i++) {
  if (i < firstDay || i >= dayArr.length) {
    $('#' + i).addClass('hiddenElement');
    console.log($('#' + i));
  } else {
    $('#' + i + ' .day').html(dayArr[i].getDate());
    $('#' + i + ' a').html(castingArr[i]);
    if (castingArr[i] == '') {
      $('#' + i + ' .day').addClass('emptyCell');
    }
  }
}