JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="debug"></div>

CSS

.calendar-day {
    background-color:red;
}
.marked {
 background-color:#ccc;
}
.calendar-header-day {
    background-color:green;
}
.calendar-table {
    direction:rtl;
    width:100px;
    /*border:solid 1px lime;*/
    font-family:Arial;
}

JavaScript

// these are labels for the days of the week
cal_days_labels = ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'];

// these are human-readable month name labels, in order
cal_months_labels = ['ינואר', 'פברואר', 'מרץ', 'אפריל',
                     'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר',
                     'אוקטובר', 'נובמבר', 'דצמבר'];

// these are the days of the week for each month, in order
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// this is the current date
cal_current_date = new Date(); 

function Calendar(month, year) {
  this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
  this.year  = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
  this.html = '';
}

Calendar.prototype.generateHTML = function(){

  // get first day of month
  var firstDay = new Date(this.year, this.month, 1);
  var startingDay = firstDay.getDay();
  
  // find number of days in month
  var monthLength = cal_days_in_month[this.month];
  
  // compensate for leap year
  if (this.month == 1) { // February only!
    if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){
      monthLength = 29;
    }
  }
  
  // do the header
  var monthName = cal_months_labels[this.month]
  var html = '<table class="calendar-table">';
  html +='<tr><td colspan="7">השתלמויות בחול</td></tr>';
  html += '<tr><th colspan="7">';
  html +=  monthName + "&nbsp;" + this.year;
  html += '</th></tr>';
  html += '<tr class="calendar-header">';
  for(var i = 0; i <= 6; i++ ){
    html += '<td class="calendar-header-day">';
    html += cal_days_labels[i];
    html += '</td>';
  }
  html += '</tr><tr>';

  // fill in the days
  var day = 1;
  // this loop is for is weeks (rows)
  for (var i = 0; i < 9; i++) {
    // this loop is for weekdays (cells)
    for (var j = 0; j <= 6; j++) { 
      html += '<td class="calendar-day">';
      if (day <= monthLength && (i > 0 || j >= startingDay)) {
        html += day++;
       ...