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:

1. Go to Listings and select the listing you want
2. Go to Pricing and availability > Calendar sync
3. Click Export calendar
4. 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}
5. 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;
}