JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<br>
<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">


</script>
<div align='left' id='timeline'></div>

<br> callback:
<div id='result' class='res'></div>
<hr>

<input type="button" id="sen" value="Cентябрь" />
<input type="button" id="oct" value="Октябрь" />
<input type="button" id="nov" value="Ноябрь" />

CSS

/*
CSS GRID help:
https://tuhub.ru/posts/css-grid-complete-guide
*/

:root {
  /*переменные */
  --clr_border: rgba(150, 150, 150, 0.5);
  --clr_unselect_bg: rgba(150, 150, 150, 0.5);
  --clr_select_bg: red;
  --clr_hover_bg: rgba(255, 0, 0, 0.5);
  /*
var(--clr_border);
var(--clr_unselect_bg);
var(--clr_select_bg);
var(--clr_hover_bg);
	получить значение
	var(--color-blue);
	*/
}

.res {
  background: var(--clr_unselect_bg);
}

.container {
  display: grid;
  /*css grid*/
  grid-column-gap: 2px;
  /*расстояние между ячейками*/
  width: 100%;
  height: 20px;
  left: 20px
}

.timeline {
  /*float: right*/
}

.container .month {
  text-align: center;
  grid-row-start: 1;
  grid-row-end: 1;
  height: 20px;
  width: 120px;
  border: solid 2px var(--clr_border);
  background: var(--clr_unselect_bg);
}

.container .year {
  text-align: center;
  grid-row-start: 1;
  /*начальная строка*/
  grid-row-end: 1;
  /*конечная строка */
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 0px;
  background: var(--clr_unselect_bg);
  visibility: hidden;
}

.container .tl_btn {
  cursor: pointer;
  position: relative;
  text-align: center;
  grid-row-start: 1;
  /*начальная строка*/
  grid-row-end: 1;
  /*конечная строка */
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
  background: var(--clr_unselect_bg);
}

/*наведение на кнопку*/

.container .tl_btn:hover {
  cursor: pointer;
  position: relative;
  text-align: center;
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
  background: var(--clr_hover_bg);
}

/*ячейка*/

.container .cell {
  cursor: pointer;
  position: relative;
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  /**/
  height: 20px;
  width: 100%;
}

/*наведение на ячейку*/

.container .cell:hover {
  grid-row-start: 1;
  grid-row-end: 1;
  border: solid 2px var(--clr_border);
  height: 20px;
  width: 100%;
 ...

JavaScript

var timeLine = (function() {
  var statusForButton = 5;
  var month = [
    'Январь',
    'Февраль',
    'Март',
    'Апрель',
    'Май',
    'Июнь',
    'Июль',
    'Август',
    'Сентябрь',
    'Октябрь',
    'Ноябрь',
    'Декабрь'
  ]
  //private
  function getRandomInt(min, max) {
    // генератор рандомного числа
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function resetSelection(event) {
    //сбрасываем выделение
    for (let ch = 0; ch < event.target.parentElement.childElementCount; ch++) {
      if (event.target.parentElement.children[ch].getAttribute('select') === "true") {
        event.target.parentElement.children[ch].setAttribute('select', false);
      }
    }
  }

  function getNumber(event) {
    var buttonWithDate = document.getElementsByClassName('cell-hint');
    //сбрасываем выделение
    for (let ch = 2; ch < event.target.parentElement.childElementCount; ch++) {
      if (event.target.parentElement.children[ch].getAttribute('select') === "true") {
        buttonWithDate[ch - 2].setAttribute('status', 4);
      } else
        try {
          buttonWithDate[ch - 2].setAttribute('status', 5)
        } catch (e) {
          console.log(e);
        }
    }
  }

  function selectElement(event) {

    if (event.target.getAttribute('class') === 'cell') {
      resetSelection(event)
      event.target.setAttribute('select', true);
      getNumber(event)
    }
  }
  //public
  return {
    elementClick: function(event) {
      //клик по элкменту
      selectElement(event);
    },
    nextClick: function(event) {
      //клик по элкменту
      let timelineID = event.target.parentElement.parentElement.getAttribute('id')
      let y = event.target.parentElement.children[0].getAttribute('y')
      let m = event.target.parentElement.children[0].getAttribute('m')
      let c = event.target.parentElement.children[0].getAttribute('c')
      m = parseInt(m, 10) + 1;
      timeLine.initMonthly(new Date(y, m), timelineID, c)

     ...