Date picker with visual insight in availability

Hi there,

I trying to build a sort of booking functionality.

Use case:
On the first screen a large date picker is shown. In this date picker days that are full are marked red, days that are fully open are green and days partly booked are marked orange.

When a day is selected available timeslots are shown to select.

Question: is a date picker available or possible to create that have that basic insight in availability per day based on color markings?

Hi, great question! This is unfortunately not a native capability of Bubble, but it’s a great suggestion! I’ve actually gone ahead and submitted this to our Product team as we are constantly making changes to our platform based on our users’ requests.

For now, I may instead suggest taking a look at our plugins page (Plugins | Bubble) for more date picker options, or potentially even creating a custom date picker. If you’re able to find an external service that has this functionality, it may also be an option to utilize our API Connector ( which can integrate almost any external API’s functionality to your app.

I apologize for the limited action our team is able to take here - if you have any other questions feel free to reach out to us at [email protected] and we’d be happy to help!

You could use the TopCal Plugin to achieve most of this, some small UI Conditions would need to be added to the selection Calendar to get the desired colour coding but it’s definitely possible.

Plugin example within one of my templates:

Forum post with more about the Plugin itself: New Plugin: TopCal - Dates, Ranges and Time Slots