JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.cs"></script>
    <div>
        <div id="demo"></div>
    </div>

CSS

/**
 * rangecalendar.css v 1.0.2
 *
 * Copyright 2013, Libero Angelo
 * Email: [email protected]
**/
 .range-calendar {
    clear: both;
    overflow: hidden;
    width: 100%;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 0;
    background-color: transparent;
}
.range-calendar.triggerable {
    display: none;
}
.calendar-wrapper {
    position: relative;
    left: 0;
    top: 0;
    z-index: 2;
    list-style: none;
    display: block;
    clear: both;
    overflow: hidden;
    padding: 10px 0;
}
.range-calendar .calendar {
    z-index: 1;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 99999px;
}
.range-calendar .calendar .cell {
    float: left;
    width: 70px;
    padding:25px 20px;
    margin: 0px;
    border-right: 1px solid rgba(0, 0, 0, 0.03);
    text-align: center;
    position: relative;
    color: #888;
}
.range-calendar .calendar .cell .day-number {
    display: block;
    clear: both;
    font-weight: bold;
    font-size: 20px;
    z-index: 1;
    position: relative;
}
.range-calendar .calendar .cell .day {
    display: block;
    clear: both;
    text-transform: uppercase;
    width: 100%;
    font-weight: 100;
    font-size: 12px;
    margin-top: 0px;
    z-index: 1;
    position: relative;
}
.range-calendar .calendar .cell .month {
    width: 100%;
    font-size: 12px;
    z-index: 1;
    text-transform: uppercase;
    position: absolute;
    opacity: 1;
    left: 0;
    top: 10px;
    font-weight: bold;
}
.range-calendar .calendar .cell .day.ferial {
    font-weight: bold;
}
.range-calendar .calendar .cell .month.first {
    opacity: 1;
}
.range-calendar .calendar .cell:hover {
    background-color: rgba(0, 0, 0, .0);
    color: #888;
}
.range-calendar .calendar .cell:hover .day-number {
}
.range-calendar .calendar...

JavaScript

/**
 * jquery.rangecalendar.js v 1.0.2 

 * Copyright 2013, Angelo Libero Mangieri
 * Email: [email protected]
 */




;
(function ($, window, undefined) {

    $.fn.rangeCalendar = function (options) {

        var defaults = {

            lang: "en",
            theme: "default-theme",
            themeContext: this,
            startDate: moment(),
            endDate: moment().add('months', 12),
            start: "+7",
            startRangeWidth: 3,
            minRangeWidth: 1,
            maxRangeWidth: 14,
            weekends: true,
            autoHideMonths: false,
            visible: true,
            trigger: null,
            changeRangeCallback: function (el, cont, dateProp) {
                return false;
            }
        };

        var returnObj;


        this.each(function (i, el) {

            var obj = el,
                $el = $(el),
                settings = $.extend(true, {}, defaults, options);
            obj.options = settings;

            obj.showCalendar = function (animate) {

                var calPos = obj.calendarObj.position();
                var lastItemPos = obj.calendarObj.find(".cell").last().position();
                var lastItemRight = (lastItemPos.left + obj.calendarObj.find(".cell").last().outerWidth());
                var selectedItemPos = obj.calendarObj.find(".cell").eq(0).position();

                $el.slideDown((animate ? 300 : 0), function () {

                    var windowWidth = $(window).outerWidth();
                    $(obj.calendarObj).css({
                        left: windowWidth
                    });
                    $(obj.monthsObj).css({
                        left: windowWidth
                    });
                    obj._placeElement(obj.calendarObj, (!selectedItemPos ? 0 : selectedItemPos.left));
                    obj._placeElement(obj.monthsObj);
                });

                obj.visible = true;
            },
            obj.hideCalendar = function () {

    ...