JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css">
<div id=checkin></div><div id=checkout></div>
JavaScript
Events = {events:[{
"from": "Tue, 01 Feb 2018 00:00:00 -0800",
"to": "Fri, 30 Sep 2018 00:00:00 -0700",
"min": 2592000000
}]};
var cEvents;
success = function(calendarEvents) {
cEvents = calendarEvents.events;
$("#checkin, #checkout").datepicker({
changeMonth: true,
numberOfMonths: 1,
onSelect: function(selectedDate) {
var option = this.id == "checkin" ? "minDate" : "maxDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
if( this.id == "checkin" )
{
var newDate = new Date( date.getTime() + cEvents[0].min );
if( newDate > $("#checkout").datepicker("getDate"))
{
$("#checkout").datepicker("setDate", newDate);
}
$("#checkout").datepicker("option", option, date);
}
else
{
var newDate = new Date( date.getTime() - cEvents[0].min );
if( newDate < $("#checkin").datepicker("getDate"))
{
$("#checkin").datepicker("setDate", newDate);
}
$("#checkin").datepicker("option", option, date);
}
},
dateFormat: 'M d, yy',
beforeShowDay: function(date) {
var from, to;
for (i = 0; i < cEvents.length; i++) {
from = Date.parse(cEvents[i].from);
to = Date.parse(cEvents[i].to);
date = Date.parse(date);
if ((date >= from && date <= to)) {
return [true, "ui-state-notbooked"];
}
}
return [false, "ui-state-booked"]; //disable all other days
}
});
}
success(Events)