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>
<div class="left">Назад</div>
<div class="right">Вперёд</div>
<input type="text" id="flatpickr2" class="flatpickr2">
<input type="text" id="flatpickr3" class="flatpickr3">

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;
}
.left, .right {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #999;
  cursor: pointer;
  margin: 10px;
}

JavaScript

var a = flatpickr(".flatpickr2", {
    disable: [{ from: "2016-12-05", to: "2016-12-10" }],
    inline: true,
    });

    var b = flatpickr(".flatpickr3", {
    disable: [{ from: "2016-12-20", to: "2016-12-25" }],
    inline: true,
    });


    $(".right").on("click", function(event) {
      a.changeMonth(1)
      b.changeMonth(1)
    });

    $(".left").on("click", function(event) {
      a.changeMonth(-1)
      b.changeMonth(-1)
    });