Templates Plugins Courses

Filter airbnb listing by dates availability

I’ve completed the zeroqode lessons and built my airbnb clone.

However, the lessons don’t include the functionality for a CRITICAL part of airbnb, …ie, the searching for a property based on AVAILABILITY based on a calendar. It only has manual functionality for up to 5 reservations.

There is a zeroqode lesson for setting up a google calendar, but it doesn’t explain how to integrate this with the airbnb clone search.

I’ve tried putting together a test site with bookings that include a date range (for the dates the booking covers), but can’t seem to get the search to work.

Can anyone help?

I solved it, see attached pics. This only works on the page that shows a single property (rather than the full site search across every listing). I set up the data table with type bookings (name of property, start date, end date, and the corresponding date range), + each listing has a list of bookings.

I set up a group search for bookings, searching for bookings (range of dates) that overlap with dates entered by the user. Inside the group, I included a shape that only appears when the group is “not empty”. Then, had a booking button that only appears when the shape appears. I’ve put a border around the group and shaded the shape in grey only so you can see it…on the site there is no border/colours for these.

This way, the user can only book a reservation if their date selection is not already booked.

1 Like

Also, the booking search only looks for the first item (it’s not preparing a list, only need one overlap to make the user’s search invalid)…and I set up a warning for the user (using a similar search, but using repeating groups, with the warning showing up in the first cell of the repeating group).

Hello, @richardpmark

It is great to hear that you have managed to add the searching for a property based on the item’s availability to the template on your own. It is a great job!

I need to note that this feature is not included nor in our AirBNB course, not in the already made template. The reason for this is quite simple - we are providing users with the possibility to create/have a marketplace-like app, which is similar to the AirBNB online marketplace but is not a full copy of it.
Please receive my apologies for the unpleasant experience you have faced, because of the mismatch between your expectations and the reality.

In an attempt to help, I can suggest you check these courses, where you may find some useful tips for the functionality you are trying to add to your app:

Marketplace Web App like Airbnb Course (once more, just for making sure):


Smart Calendar Booking System Course:

Jobly Template Tutorial:

I hope this information will be helpful to you :pray:
Best regards,

I think that the date availability is fundamentally critical to a property booking app, whether or not the aim is to “copy” air bnb!

Leaving it out is a a big problem as it means that all users would have to resort to direct contact every they want to book a property. This makes the app basically a brochure with a booking engine…not very useful! Most people using your training would likely not know how to fix this (the solution I developed only works for individual properties, rather than on the search page…better, but not a great experience!).

I think the course needs to be updated to include the essential basic functionality that a user would expect from a property reservation site, ie live availability.

@richardpmark,

I agree that the calendar availability is one of the main features of any booking app. No issue. We were not going to leave it out, we just used another method to list the search result (which is still based on availability).

Within the Airbnb template (and course) there is no based on calendar availability function, right. But the listing availability logic is the following:

  • user can identify the geographical address, booking start date and booking end date of the property he is going to book;
  • as a result, a user sees the list of properties, available on the identified location in the identified date;
  • after the successful booking of the property in the identified date period, the same property will not be present in the resulting search list for this user/other users in the booked period.

So, in our course and template we represent to users the searching for a property based on the current availability. If the property is being booked on the period the user has identified it in the search field - this property won’t be shown in the search result page. And vice versa. That is the logic behind the project, however, it can be expanded upon.

If you would like to know how to set the booking on availability based on calendar functionality, I can do nothing but to advise you once more to check the Booking Calendar course. However, it is not designed to show how it is combined with another app course, but rather general guidance on how to create the calendar booking system.

Anyway, thank you for your suggestions and comments :pray:
I truly hope that the current booking logic, within the Airbnb template/course, now makes more sense to you and that the suggested course will be helpful.

Please receive my apologies if any kind of confusion or misunderstanding has occurred. And if there any other questions - please let me know :slight_smile:
Regards,