JSFiddle - React, Tailwind, and code Playground

by Руслан Абсалямов

HTML

<div class="calendar">
  <div class="calendar-header">
    <i class="material-icons">keyboard_arrow_left</i>
      Ноябрь 2019 г.
    <i class="material-icons">keyboard_arrow_right</i>
  </div>
  <div class="calendar-body">
     <div class="week">
       <div class="dayOfWeek">Пн</div>
       <div class="dayOfWeek">Вт</div>
       <div class="dayOfWeek">СР</div>
       <div class="dayOfWeek">Чт</div>
       <div class="dayOfWeek">Пт</div>
       <div class="dayOfWeek">Сб</div>
       <div class="dayOfWeek">Вс</div>
    </div>
    <div class="week">
       <div>
         <span>1</span>
      </div>
       <div>
         <span>2</span>
      </div>
       <div>
         <span>3</span>
      </div>
       <div>
         <span>4</span>
      </div>
       <div>
         <span>5</span>
      </div>
       <div>
         <span>6</span>
      </div>
       <div>
         <span>7</span>
         
      </div>
    </div>
    <div class="week">
      <div>
        <span>8</span>
      </div>
      <div>
        <span>9</span>
      </div>
      <div>
        <span>10</span>
      </div>
      <div>
        <span>11</span>
      </div>
      <div>
        <span>12</span>
      </div>
      <div>
        <span>13</span>
      </div>
      <div>
        <span>14</span>
      </div>
    </div>
    <div class=week>
      <div>
        <span>15</span>
      </div>
      <div>
        <span>16</span>
      </div>
      <div>
        <span>17</span>
      </div>
      <div>
        <span>18</span>
      </div>
      <div>
        <span>19</span>
      </div>
      <div>
        <span>20</span>
      </div>
      <div>
        <span>21</span>
      </div>
    </div>
    <div class="week">
      <div>
        <span>22</span>
      </div>
      <div>
        <span>23</span>
      </div>
      <div>
        <span>24</span>
      </div>
      <div>
        <span>25</span>
      </div>
      <div>
        <span>26</span>
      </div>
      <div>
        <span>27</span>
      </div>
    ...

SCSS

.calendar {
  .calendar-header {
    display: flex;
    align-items: center;
    i {
      cursor: pointer;
    }
  }
  .calendar-body {
    display: flex;
    flex-direction: column;
    .week {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .dayOfWeek {
        text-align: center;
        height: 35px;
        line-height: 35px;
      }
      div {
        display: inline-block;
        text-align: right;
        width: 14%;
        border: 1px solid black;
        height: 100px;
        span {
          padding-right: 5px; 
        }
      }
     }
  }
}

JavaScript

let year = moment().year();
let month = moment().month();

let firstDay = moment().startOf("month").day("Monday");
let endDay = moment().endOf("month").day("Sunday");

console.log(endDay);