Services Plugins FAQs

Allowing users to block dates on using their calendar

Help Needed
#1

I have for the past 2 weeks tried to find an answer to these questions on a Bootcamp, YouTube, Forums, with no luck.

I am currently using Air Date/Time Picker with Bubble.io for an Airbnb-like marketplace and it’s been hard for me to: (Hosts are users in my database)

  1. Block specific amount of dates in advance for each host, for example “Host A” wants to block always 30 days in advance, so whenever a customer checks, always 30 days in advance is blocked. And another host “Host B” wants 7 days in advance, so whenever I check Host B’s listings, they’re already blocked for 7 days ahead.

  2. Allowing hosts to block specific dates in their calendar on the backend, so they can enter their profile page and block a specific day or set of dates.

How can I do those, your help is much appreciates guys

#2

Hello @itisthebr,
Apologies for the late reply due to the weekend. :pray:

Could you please explain the expected result in more detail? Any screenshot/screencast would be greatly appreciated so that we can see if it’s possible to achieve your goal and try to provide suggestions about it.

For this, you need to create a new field in the user data type that will contain the blocked dates selected by the host. Screenshot by Lightshot

And, you will need a flow that will change the blocked dates when the current user changes these dates via the calendar. Screenshot by Lightshot

Here is a short video: Loom | Free Screen & Video Recording Software | Loom

Also, please note that it’s not possible to change the mode in the plugin element. You need to use 2 elements, in order to choose “single date” or “range”. So, one of them will allow your user to select a a specific date, and the second will allow them to select multiple days.

Hope it helps!

Best,
Gulce

1 Like
#3

Hello @Gulce

Thank you for coming back to me, this is very helpful.

I made a video about my first question “1. How to block a calendar and give a host a grace period to prepare a home?”: Dropbox - Advance_Notice.mov - Simplify your life (Audio available)

The second answer is amazing, thank you for making an example and recording it. I do have follow-up questions please: Dropbox - Cal_Blocking-Dates.mov - Simplify your life

#4

Hello @itisthebr,
Thank you for the details. :pray:

First of all, if I understand correclty you are using our Air Calendar and Air Date/Time Picker plugin. Please correct me if I’m wrong.

Unfortunately, it’s not possible to achieve your goal with mentioned plugins. I can suggest you write on the Bubble forum and describe your use case with as many details as possible. I bet there is already somebody who was trying to build something similar and would like to share how they did solve that problem or at least will point you in the right direction.

Sorry for not being able to help with this one. :pray:

In the video I shared, I use the inline mode. You can access this view by checking the “display inline” field. Please see the screenshot - Screenshot by Lightshot

As for the “selected range as a list”, it’s quite strange since it should be available as a plugin state. Please share your settings so we can better understand the problem here. Screenshot by Lightshot Before that, you can check my setup here and compare it to yours: Testing | Bubble Editor

Also, the reason why I used different pickers to show selected dates and blocked dates separately was to show the result better. But, for sure you can use only one plugin element (air date/time picker v2) to select a range and display the blocked dates. You can simply specify the dates you want to block in the same picker: Screenshot by Lightshot

Furthermore, if you would like to block dates via Air Calendar (select specific dates and click on the “x” button), I’m afraid you can achieve this in a different way using the Air date time picker. I’ve made another short video showing the possible use case: Loom | Free Screen & Video Recording Software | Loom

Regarding “unblocking dates” via picker, unfortunately, it’s not possible to unblock the dates automatically from the plugin side but you can do this using Bubble’s default “delete a thing” action pointing to which exact record you want to delete from the current page listing’s blocked dates list. For example, to save blocked dates into our database, we are using the Bubble’s default action “create a new thing”. So, we can use the delete thing action in the same way.

Please check the documentation and demo editors for both plugins.

Hope it helps!

Regards,
Gulce

#5

Hello @Gulce,

Thank you for responding, it’s very helpful. The reason for the delay is I read your message, looked at your bubble link, and watched the videos many times, as well as experimented myself to learn as much as possible before coming back to you.

  1. I am still working on issue number 1 " 1. How to block a calendar and give a host a grace period to prepare a home?”: Dropbox - Advance_Notice.mov - Simplify your life"

The Zeroqode support have come back to me saying the following:

To block a specific period of time (days or hours) you can use the simple picker functionality (by picking some days for blocking) and create an additional field in your database, which will be in charge for the grace period. This blocked grace period can be displayed on the plugin element (calendar) the same way as ordinary blocked dates, here:

image

I don’t understand what they mean, I tried to find exactly how to do that, without success.

  1. I have managed to create a system that would block and unblock dates for each user, check it out here: blockhost | Bubble Editor

Basically this is what it can do:

  • Allows the user to select a range from the “Air Date/Time Picker” that they want to Block (But they’re unable to Unblock since the block dates cannot be highlighted
  • Allows the user to select a start and end date for the dates they want to block using the standard bubble Date/Time Picker
  • Added a “Block” button that would process the dates you want to block
  • Added an “Unblock” button to process the dates you want to unblock

Thank you for helping Gulce.

#6

@Gulce I have great news, I have figured out how to do part 1 above.

With the help of the Bubble Support, I figured that under the Air Date/Time Picker’s “Minimum date” input, I can add the following:

image
image435×570 91.7 KB

The only issue, that blocks the calendar for all hosts, so to fix that, in the Database under “Users” I Created a new field called “Grace” and gave it a field type of “Number”.

image

Finally in the Minimum date input, I changed it to the following:

It says “Current Page User” because this Air Date/Time picker is inside the Host’s page. Now each host can decide that grace period, if it is 1 day or 7 days or whatever days they want to block in advance, allowing the host the time to prepare in advance before every guest.

PS: Part 2 was solved thanks to you, so my questions are all complete (for now, ahah), thank you for your kindness, we learned a lot doing this.

1 Like
#7

Hello @itisthebr,
Apologies for the late reply. :pray:

Glad to hear you got it sorted! Please feel free to contact me if you need any further information. I’ll be glad to assist you. :slightly_smiling_face:

Have a good day!

Best,
Gulce

1 Like