Building an Airbnb style calendar in Mobile Beta

Mobile Beta
1

Hi there everyone :waving_hand:

I am trying to build an Airbnb-style booking calendar in Bubble mobile beta editor and am interested to know if anyone here has successfully done this before — or can share some insights into how they approached it.

By Airbnb-style calendar, I mean one that:

  • Displays all dates in a grid view for the selected month (with correct day alignment, e.g. if the 1st falls on a Wednesday).

  • Allows date ranges to be selected or highlighted for bookings.

  • Shows availability and pricing data dynamically (e.g. booked days greyed out, available days clickable).

my current roadblock is I’m stuck trying to create the expression to correctly display the days in each cell of the calendar. So far, I can generate the numbers in a 6x7 grid using numbers 1-42 as a data source however the logic for mapping the dates to the right weekday cells isn’t lining up properly.

I’ve tried a few different approaches (using :extract day, :add days, referencing dates with custom states), but I can’t quite get the expression right for a fully accurate calendar grid.

If anyone’s done this before — or has a reliable way to calculate and display dates in the correct position — I’d really appreciate your guidance :folded_hands:

I have added a screen shot of the AirBnB calendar as a reference for what I am aiming to build.

Thanks in advance and sorry if this is an amateur question. I am 1000% an amateur Bubbler!

IMG_5730
IMG_57301170×2532 134 KB

2

I built a similar feature with a custom state set to the month’s first day and a 6x7 repeating group of numbers 1–42; each cell computes its date as “firstOfMonth + (cellIndex - weekdayOfFirst)” using Bubble’s :extract day of week and :add days, then I conditionally style the cell if that date is in a bookings list.