JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.2.4/picnic.min.css">
<script src="https://npmcdn.com/flatpickr"></script>
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css">
<div class="result"></div>
<input type="text" id="flatpickr2" class="flatpickr">
<input type="text" id="flatpickr3" class="flatpickr">

CSS

body {
  background:#F3F5F6
}
.date {
    float: left;
    width: 45px;
    text-align: center;
    z-index: 1;
    position: relative;
    height: 40px;
    line-height: 40px;
    color: #d0d0d0;
}

.cont {
padding: 40px;
    background: white;
    margin: 50px;
    width: 530px;
    height: 120px;
   }
     
.busy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    background: blue;
    opacity: 0.2;
    cursor: pointer;
}

JavaScript

var inMonthSync = 0;
var calendars = Array();

function syncMonths(selectedDates, inputValue, self, data) {
  if (inMonthSync)
  	return;
  var scroll = document.documentElement.scrollTop;
  inMonthSync = 1;
  calendars.forEach(function(calendar) {
    calendar.currentYear = self.currentYear;
    calendar.changeMonth(self.currentMonth, false);
    console.log(calendar);
  });
  inMonthSync = 0;
  window.scrollTo(0, scroll);
}


calendars.push(new Flatpickr(
	document.getElementById('flatpickr2'),
  {
    disable: [{ from: "2015-12-05", to: "2018-12-10" }],
  	inline: true,
    onMonthChange: syncMonths,
    onYearChange: syncMonths,
    onDayCreate: function(dObj, dStr, fp, dayElem){
    var data = ["2016-12-5", "2016-12-7"];
    var a = fp.parseDate(data[0]), b = fp.parseDate(data[1]);
    if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b)
              dayElem.innerHTML += "<div class='busy' a-id='111'></div>";
              }
  }      
));

calendars.push(new Flatpickr(
	document.getElementById('flatpickr3'),
  {
    disable: [{ from: "2014-12-20", to: "2018-12-25" }],
  	inline: true,
    onMonthChange: syncMonths,
    onYearChange: syncMonths,
    onDayCreate: function(dObj, dStr, fp, dayElem){
    var data = ["2016-12-20", "2016-12-25"];
    var a = fp.parseDate(data[0]), b = fp.parseDate(data[1]);
    if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b)
              dayElem.innerHTML += "<div class='busy' a-id='222'></div>";
              }
  }      
));


 $(".busy").click(function(){
  var ida = $(this).attr('a-id');
  console.log(ida);
  $('.result').text(ida);
});