react-dates-airbnb
v1.1.4
Published
The react-dates component on steroids. Real-time parsing of your property calendars with blocking of reservation days.
Downloads
32
Readme
Connecting your Airbnb calendar to your site.
React-dates component for Airbnb calendars — on steroids!
Real-time parsing of your property calendars from Airbnb.com with blocking of reservation days.
The component automatically connects to your Airbnb calendar and displays free and busy dates for the reservation.
Demo
React-dates calendar with online reservations from Airbnb - CodeSandbox
Installation
yarn add moment react-dates react-dates-airbnb
Configuration
To connect to your calendar, follow these steps:
- Go to Listings and select the listing you want
- Go to Pricing and availability > Calendar sync
- Click Export calendar
- In the Export calendar window, copy the link, then paste it into your other iCal-based calendar.
- Example:
https://www.airbnb.ru/calendar/ical/{ics}.ics?s={s}
- Example:
- Specify the variables from the url address of your calendar in the component settings:
{ics}
&{s}
Usage
import React from 'react';
import AirbnbCalendar from 'react-dates-airbnb'
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import './App.css'
// libs
import moment from 'moment'
function App() {
const blockedDates = Array(5).fill(null).map((item, index) => {
return moment().add(index + 10, 'days').format('YYYY-MM-DD')
})
return (
<div>
<AirbnbCalendar
settings={{
ics: '37624378',
s: '9a6ff0020fba58505027c579ec43354b'
}}
blockedDates={blockedDates}
onDatesChange={(dates) => {
console.log('Dates ', dates)
}}
initialStartDate={moment()}
initialEndDate={moment().add(5, 'days')}
numberOfMonths={3}
maximumMonth={3}
/>
</div>
)
}
export default App;
/* App.css */
.CalendarDay__blocked_calendar {
background-color: red;
}