I am creating a registration form for a tutoring service.
The idea is that the client enters their name, email address etc. and can then choose a time. The time that can be chosen is the same every weekday.
E.g. on Monday always at 2pm and 3pm.
On Tuesday always at 4pm and 5pm and so on.
The time should be a “clickable field”. The field the customer clicks on is the selected field.
How can I create this using a calendar? E.g. When the customer clicks on Monday in the calender, no matter which Monday in the year, the times that are available on Monday should always be displayed, so in this case 2pm and 3pm o’clock. But once the appointment has been booked, it should not be possible to book this exact date und time again.
Yeah this is one of the things I’ll generally use an external service for unless I have a specific reason not to. I do it on my website.
If you want the meeting bookings to be added to your Bubble DB, most of these providers (Calendly/Cal) will send webhooks to your Bubble app where you can add them. I find this quicker and easier than manually creating a booking system in Bubble (and using external services also means I can use auto-availability based on my external calendars without manually configuring availability).
Some might be like ‘well you’re a Bubble dev, why not build it on Bubble?’. Because why would I rebuild something that’s been done dozens of times better than I could do it when I could spend time working on actually important stuff!
There are plenty of calendar tutorials if you do want to go Bubble native though - I’ve done it for two different apps, it’s just fiddly.
I just embedded https://cal.com/ as an iFrame. I set the page background to be the same colour as Cal’s default background. <iframe src="https://cal.com/notquiteunicorns/30min"></iframe>
and set dimensions to 100% width and 100% height. Cal.com supports webhooks with Bubble.
