JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div class="target_for_calendar1">

</div>
<div class="calendar1"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Baumans&display=swap');
 
      body {
        width: 860px;
      }
 
      body,
      select,
      input {
        font: 14px serif;
      }
 
      .calendar.simple {
        width: 330px;
        height: 375px;
        display: inline-block;
        border: 1px solid hsl(0, 0%, 66%);
        border-radius: 6px/4px;
        padding: 5px;
        margin: 0 0 5px 0;
      }
       
 
      .navigation_panel {
        background-color: hsl(210, 100%, 92%);
        min-height: 34px;
        max-height: 78px;
        border: 1px solid hsl(0, 0%, 66%);
        border-radius: 6px/4px;
        padding: 10px;
        margin-bottom: 5px;
        text-align: center;
        vertical-align: middle;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
      }
 
      .navigation_panel button,
      .navigation_panel .calendar_year {
        background-color: hsl(210, 100%, 85%);
        color: hsl(210, 100%, 45%);
        font: 14px serif;
        border: 1px solid hsl(210, 100%, 45%);
      }
      
      .calendar button.year_minus,
      .calendar button.year_plus {
      background-color: hsl(210, 100%, 75%);
      color: hsl(210, 100%, 45%);
      font: 24px serif;
      border: 1px solid hsl(210, 100%, 45%);
      width: 55px;
      height: 52px;
      position: relative; top: 2px;
      }
      .calendar.simple button.year_minus,
      .calendar.simple button.year_plus {
          width: 27px;
          height: 28px;
          font: 15px serif;
          vertical-align: middle;
          margin-top: -4px;
      }
 
      .calendar button.year_minus {
      margin-right: -9.5px;
      border-radius: 32px 0 0 32px / 20px...

JavaScript

class MyCalendar {
   options = {
      target : null, 
      direction: 'h', // h или v . горизонтально, вертикально
      type: 'simple', // full | simple
      inRow: 3, // количество месяцев в ряд, если календарь на год (full).
   };
   elements = {
      box: null,
      year_minus: null,
      year_plus: null,
      buttonToday: null,
      yearListener: null,
      table: null,
   }
   data = {
      dayNames: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
      monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
      today: null,
      currentYear: null,
      currentMonth: null,
      html: ''
   }
   constructor(props={}) {
      this.options = Object.assign(this.options, props),
      this.elements.box = document.querySelector(props.target);
      this.elements.box.classList.add('calendar' , this.options.type , this.options.direction);
      
      let date = new Date();
      this.data.today = {
         'Y'  : date.getFullYear(),
         'm'  : date.getMonth(),
         'd'  : date.getDate(),
         'N'  : date.getDay(),
         date : date
      }
      this.data.currentYear  = this.data.today.Y;
      this.data.currentMonth = this.data.today.m;
      this.build();
   }
   
   build() { 
      
      this.elements.box.innerHTML = this.templates.head;
      this.elements.year_minus    = this.elements.box.querySelector('.year_minus');
      this.elements.year_plus     = this.elements.box.querySelector('.year_plus');
      this.elements.buttonToday   = this.elements.box.querySelector('.presently');
      this.elements.yearListener  = this.elements.box.querySelector('.year_input');
      this.elements.table         = this.elements.box.querySelector('.table'); 
      this.elements.rotate        = this.elements.box.querySelector('.table_rotate'); 
      this.elements.yearListener.value = this.data.today.Y;
      
      this.make();
      this.events();
   }
   
   make() {
   ...