JSFiddle - React, Tailwind, and code Playground

HTML

<div class='calendar_modern' id='calendar'></div>
    <div class='time_list'>
      <p>
        <b>Click on day for select.</b>
      </p>
      <p>
        <b>Second click for unselect.</b>
      </p>
      <p>List of selected days:</p>
      <ul></ul>
    </div>

CSS

body {
  background: #eff0eb;
}

div{ padding: 0; margin:0; font-size:10px; }

.calendar_modern {
  padding: 50px;
}
.calendar_modern .calendar {
  margin: auto;
  width: 240px;
  height: 290px;
}
.calendar_modern .calendar .nav {
  height: 0;
  position: relative;
}
.calendar_modern .calendar .nav i, .calendar_modern .calendar .nav b {
  display: block;
  font-style: normal;
  position: absolute;
  cursor: pointer;
  width: 30px;
  height: 30px;
  z-index: 100;
  top: 0;
}
.calendar_modern .calendar .nav i {
  left: 0;
  border-right: 1px solid #423a37;
  /*background: url(/images/modern/lft.png) no-repeat center center #372F2C;*/
  background: url(http://cs4399.userapi.com/u49225742/docs/58f03726ea27/lft.png) no-repeat center center #372f2c;
}
.calendar_modern .calendar .nav b {
  right: 0;
  border-left: 1px solid #423a37;
  /*background: url(/images/modern/rgt.png) no-repeat center center #372F2C;*/
  background: url(http://cs4399.userapi.com/u49225742/docs/5fd2e9dd3a9f/rgt.png) no-repeat center center #372f2c;
}
.calendar_modern .calendar .viewport {
  overflow: hidden;
  zoom: 1;
  height: 260px;
  width: 240px;
  position: relative;
}
.calendar_modern .calendar .months {
  white-space: nowrap;
  word-spacing: -2px;
  letter-spacing: -2px;
  position: absolute;
  height: 260px;
}
.calendar_modern .calendar .month {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  width: 240px;
  height: 260px;
}
.calendar_modern .calendar .month {
  *display: inline;
}
.calendar_modern .calendar .month .header {
  height: 30px;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  line-height: 30px;
  font-weight: bold;
  font-size: 1.4em;
  text-align: center;
  background: #372f2c;
}
.calendar_modern .calendar .month .body {
  background: #e4e4e4;
}
.calendar_modern .calendar .month...

JavaScript

(function() {

  this.compactArray = function(array) {
    return array.filter(function(e) {
      return e;
    });
  };

  this.OrderedHash = (function() {

    function OrderedHash(array) {
      if (array == null) {
        array = [];
      }
      this.data = [];
      if (array.length > 0) {
        this.data = array;
      }
    }

    OrderedHash.prototype.get = function() {
      return this.data;
    };

    OrderedHash.prototype.push = function(obj) {
      this.data.push(obj);
      return this.sortByKey();
    };

    OrderedHash.prototype.deleteByKey = function(key) {
      var index, item, name, value, _ref;
      _ref = this.data;
      for (index in _ref) {
        item = _ref[index];
        for (name in item) {
          value = item[name];
          if (name.toString() === key.toString()) {
            delete this.data[index];
          }
        }
      }
      return this.data = compactArray(this.data);
    };

    OrderedHash.prototype.first = function() {
      return this.data[0];
    };

    OrderedHash.prototype.last = function() {
      return this.data[this.data.length - 1];
    };

    OrderedHash.prototype.sortByKey = function(reverse) {
      if (reverse == null) {
        reverse = false;
      }
      return this.data.sort(function(a, b) {
        var akey, anum, bkey, bnum, key, r, value, _ref;
        for (key in a) {
          value = a[key];
          akey = key;
        }
        for (key in b) {
          value = b[key];
          bkey = key;
        }
        anum = parseInt(akey, 10);
        bnum = parseInt(bkey, 10);
        if (typeof anum === 'number' && typeof bnum === 'number') {
          akey = anum;
          bkey = bnum;
        }
        if (reverse) {
          _ref = [bkey, akey], akey = _ref[0], bkey = _ref[1];
        }
        return r = akey > bkey ? 1 : akey < bkey ? -1 : 0;
      });
    };

    OrderedHash.prototype.sortByValue = function(reverse) {
      if (reverse == null) {
        reverse =...