JSFiddle - React, Tailwind, and code Playground

by Eugeny Venegrad

HTML

<script src="http://webven.ru/wp-demo/sites/13/js/minify.min.js"></script>
<div class="calendar-years">
        <div class="year-overflower">
        <ul class="year-selector">
             <li class="year-li">
                <a href="javascript:void(0);" class="yearbutton">2014</a>
                <ul class="month-ul no-active">
                    <li><a href="javascript:void(0);">янв</a></li>
                    <li><a href="javascript:void(0);">фвр</a></li>
                    <li><a href="javascript:void(0);">мрт</a></li>
                    <li><a href="javascript:void(0);">апр</a></li>
                    <li><a href="javascript:void(0);">май</a></li>
                    <li><a href="javascript:void(0);">июн</a></li>
                    <li><a href="javascript:void(0);">июл</a></li>
                    <li><a href="javascript:void(0);">авг</a></li>
                    <li><a href="javascript:void(0);">снт</a></li>
                    <li><a href="javascript:void(0);">окт</a></li>
                    <li><a href="javascript:void(0);">нбр</a></li>
                    <li><a href="javascript:void(0);">дкр</a></li>
                </ul>
            </li>
            
            
            <li class="year-li active-year">
                <a href="javascript:void(0);" class="yearbutton">2013</a>
                <ul class="month-ul no-active">
                    <li><a href="javascript:void(0);">янв</a></li>
                    <li class="active-month"><a href="javascript:void(0);">фвр</a></li>
                    <li><a href="javascript:void(0);">мрт</a></li>
                    <li><a href="javascript:void(0);">апр</a></li>
                    <li><a href="javascript:void(0);">май</a></li>
                    <li><a href="javascript:void(0);">июн</a></li>
                    <li><a href="javascript:void(0);">июл</a></li>
                    <li><a href="javascript:void(0);">авг</a></li>
                    <li><a href="javascript:void(0);">снт</a></li>
   ...

CSS

body {padding: 20px;}
ul, li {list-style: none;margin: 0;padding:0;}
* {box-sizing: border-box;font-family: PT Sans;}
a {text-decoration: none;}


.calendar-years {width:100%;overflow:hidden;height:30px;}
.calendar-days {width:100%;border: 1px solid #E3E0D3;padding: 10px 50px;position: relative;}
.year-overflower {width: 100000px;}

.year-li {display:inline-block;vertical-align: top;}
.year-li ul {display:inline-block;}
.year-li ul li {display: inline-block;}

.year-li .yearbutton {border: 1px solid #E3E0D3;padding: 2px 5px 2px 5px;color: #545353;font-size: 16px;display:inline-block;vertical-align:top;margin-right:5px;height:26px;}

.year-li.active-year .yearbutton {background: #E3E0D3;}

.month-ul li {height:26px;}
.month-ul a {color: #545353;padding: 2px 5px 2px 5px;display:block;height:100%;}
.month-ul a:hover, .active-month a {background: #E3E0D3; }

.year-li .month-ul.no-active {display:none;}

.active-year .month-ul {display: inline-block;}

.calendar-days-wrapper {height:30px;width:100%;overflow:hidden;position: relative;}

.calendar-days-slider {position: absolute;top:0px;left:0px;white-space:nowrap;}

[class^="calendar-month-days-"], [class*="calendar-month-days-"] {display: inline-block;}
[class^="calendar-month-days-"] li, [class*="calendar-month-days-"] li {display: inline-block;}
.month-num {display: inline-block;vertical-align: middle;}
.month-num li {display: inline-block;vertical-align: middle;}
.month-title {display: inline-block;vertical-align:middle;font-size: 18px;border-radius: 0px;padding: 3px 10px 3px 10px;background: #E3E0D3;color: #545353;height:28px;text-transform: uppercase;font-family: PT Sans Narrow;}

.num-day {min-width:28px;height:28px;text-align:center;display: block;color: #545353;border-radius: 50%;-moz-border-radius: 50%;-o-border-radius: 50%;vertical-align:middle;padding: 3px;}
.num-day:hover {background: #E3E0D3;}

.month-title, .num-day {margin-right: 5px;}
.go-left, .go-right {cursor: pointer;color:#555;position:...

JavaScript

/* Календарь */

    var currentYear = (new Date).getFullYear();
    var currentMonth = (new Date).getMonth();
    /* Функция определения сумы элементов */
    Array.prototype.sum = function(){
        for (var i=0, sum=0; i < this.length; sum += this[i++]);
	    return sum;
    }
    
    /* Добавляем текущему году acitve-year */
    $(".active-year").children(".month-ul").removeClass("no-active");
    


    $('[class^="calendar-month-days-"]').hide();  
    var thatyear = $('.active-year .yearbutton').html();
    $('.calendar-month-days-' + thatyear).show();  
    


 




	function getmaxwrap() {

		  /* Получаем ширину всех блоков */  
		  	var numdaywidth = [];
		  	var nummonthwidth = [];  	
		  	var thatyear = $('.active-year .yearbutton').html();

		    $(".calendar-month-days-" + thatyear + " .num-day").parent("li").each(function(indx) {
			   	  numdaywidth.push($(this).innerWidth());
			});
			    
			$(".calendar-month-days-" + thatyear + " .month-title").each(function(indx) {
			  nummonthwidth.push($(this).innerWidth());
			});


			/* Просчитываем отступы */
			var lenght1 = $(".calendar-year-block .num-day").length;
			var lenght2 = $(".calendar-year-block .month-title").length;
			var alllenght = lenght1 + lenght2;
			var alllenght = alllenght * 5;

			/* Собираем ширину всех блоков */
			var   sarc1 = numdaywidth.sum();
			var   sarc2 = nummonthwidth.sum();
			var   wrapperviewportwidth = sarc1 + sarc2 + alllenght;
			       
			   
			$(".calendar-year-block").css({"width" : wrapperviewportwidth});	


	}


	getmaxwrap();
   


    /* Функции по нажатию кнопок годов */
    $(".yearbutton").click(function() {

        $(".month-ul").addClass("no-active");
        $(".month-ul li").removeClass("active-month");
        $(".year-li").removeClass("active-year");
        $(this).parent(".year-li").addClass("active-year").children(".month-ul").removeClass("no-active");

        /* Сбиваем к нулю полотно */
       ...