CodePen Embed - Calendar Month

<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>
      <div>
        <span>28</span>
      </div> 
    </div>
    <div class="week">
      <div>
        <span>29</span>
      </div>
      <div>
        <span>30</span>
      </div>
    </div>
  </div>
</div>

.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; 
        }
      }
     }
  }
}

View Compiled

const getFirstDateofMonth = date => new Date(date.getFullYear(), date.getMonth(), 1).getDay();
const daysInMonth = date => new Date(date.getFullYear(), date.getMonth()+1, 0).getDate();

const date = new Date(Date.now());
let currnetDay = 1;
let arr_date = [];
let arr_num = [];

while(currnetDay < daysInMonth(date)) {
  arr_date.push(currnetDay);
  arr_date.push(date.getDay);
  currnetDay++;
}

for(let key in arr_num) {
    console.log(arr_num[key]);
}

This Pen is owned by Ruslan on CodePen.

See more by @rusline on CodePen

External CSS

https://fonts.googleapis.com/icon?family=Material+Icons

External CSS

External JavaScript