JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="//coinmuseum.ru/js/vendor/jquery.min.js"></script>
<script type="text/javascript" src="//coinmuseum.ru/js/vendor/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />


<div class="picker-place">
  <div class="js-date-picker"></div>
</div>
<div class="picker-filter">
  <a class="picker-filter-link js-date-type" data-type="date-type-a" href="#">
    red
  </a>

  <a class="picker-filter-link js-date-type" data-type="date-type-b" href="#">
    green
  </a>

  <a class="picker-filter-link js-date-type" data-type="date-type-c" href="#">
    blue
  </a>
</div>
<script>
  var dataArray = [{
    date: "10.08.2016",
    html: "first text",
    type: "date-type-a"
  }, {
    date: "11.08.2016",
    html: "second text",
    type: "date-type-b"
  }, {
    date: "12.09.2016",
    html: "third text",
    type: "date-type-c"
  }, {
    date: "14.09.2016",
    html: "fourth text",
    type: "date-type-a"
  }];

</script>

SCSS

body {
  min-width: 1000px;
}

.picker-place {
  display: block;
  height: 260px;
}

.picker-filter-link {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  padding: 4px;
  & + .picker-filter-link {
    margin-left: 20px;
  }
  &.active {
    background: #000;
    color: #fff;
  }
}

.date-type-a .ui-state-default {
  background: red !important;
  color: #fff !important;
}

.date-type-b .ui-state-default {
  background: green !important;
  color: #fff !important;
}


.date-type-c .ui-state-default {
  background: blue !important;
  color: #fff !important;
}

.date-type-hidden .ui-state-default {
      background: #f6f6f6 !important;
    color: #454545 !important;
}

JavaScript

$.datepicker.regional['ru'] = {
  closeText: "Закрыть",
  prevText: "&#x3C;Пред",
  nextText: "След&#x3E;",
  currentText: "Сегодня",
  monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
    "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"
  ],
  monthNamesShort: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн",
    "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"
  ],
  dayNames: ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
  dayNamesShort: ["вск", "пнд", "втр", "срд", "чтв", "птн", "сбт"],
  dayNamesMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
  weekHeader: "Нед",
  dateFormat: "dd.mm.yy",
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix: ""
};

$.datepicker.setDefaults($.datepicker.regional['ru']);


var multipickerApp = function() {

	var params = {
		'picker':$('.js-date-picker'),
		'enableTypes':[],
		'typeFilters':$('.js-date-type'),
		'hiddenCellClass':'date-type-hidden',
		'appendTarget':$('.js-content')
	};

	var mpApp = {
		'init':function(){
			mpApp.constructFilters();
			params.typeFilters.on('click',mpApp.eventFilters);
			mpApp.constructPicker();
		},
		'constructFilters': function() {
		  params.enableTypes = [];
		  var allTypes = [];
		  var noResult = true;
		  params.typeFilters.each(function(i, e) {
		    var $thisFiler = $(e);
		    var thisType = $thisFiler.data().type;
		    allTypes.push(thisType);
		    if ($thisFiler.hasClass('active')) {
		      params.enableTypes.push(thisType);
		      noResult = false;
		    }
		  });
		  if (noResult) { params.enableTypes = allTypes; }
		},
		'constructPicker':function(){
			params.picker.datepicker({
			  dateFormat: "dd.mm.yy",
			  yearRange: "-0:+0",
			  numberOfMonths: 3,
			  changeMonth: false,
			  changeYear: false,
			  beforeShowDay: function(d) {
			    var customDate = $.datepicker.formatDate('dd.mm.yy', d);
			    var result = mpApp.detectDates(customDate);
			    var externalClass = ' ';
			    if...