JSFiddle - React, Tailwind, and code Playground

by kigorw

HTML

<div id="calendar"></div>

JavaScript

new Calendar('calendar', 2011, 7);

 function Calendar (id, year, month){
   //Get Month days
   var box = document.getElementById(id);
   var daysVal = new Date(year, month + 1, 0).getDate();
   var dayNumber = new Date (year, month).getDay();
   var table = ['<table>' +
             '<thead>' +
               '<tr>' +
                 '<th>Пн</th>' +
                 '<th>Вт</th>' +
                 '<th>Ср</th>' +
                 '<th>Чт</th>' +
                 '<th>Пт</th>' +
                 '<th>Сб</th>' +
                 '<th>Вс</th>' +
               '</tr>' +
             '</thead>' +
               '<tbody><tr>'];
   //Сколько клеток пустых нужно вствить перед началом календаря
   for(var i = 0; i < dayNumber-1; i++){
     table.push('<td></td>');
   }
   //Вставляем дни недели
   for(var j = 1; j <= daysVal; j++){
     table.push('<td>'+ j +'</td>'); //вставляем клетки с днями
     if(new Date (year, month, j).getDay() == 0){ //и проверяем при каждой итерации, если день Воскресенье, тогда переносим строку
       table.push('</tr><tr>');
     }
   }
   //Сколько клеток еще до конца вставить
   if(new Date (year, month, daysVal).getDay() != 0){
     var cellForable = 7 - new Date (year, month, daysVal).getDay();
     for(var i = 0; i < cellForable; i++){
       table.push('<td></td>');
     }
   }
   table.push('</tr></tbody></table>');
   box.innerHTML = table.join('');
 }