Platfio Blog
Fundamentals

Bookables (Calendar)

Lesson 8• May 6, 2024

[Intro] In this lesson we’ll be discussing setting up the bookables for your app in particular, calendar bookables. Let’s get started…

[Editor] To access the bookables section. Click on the Platfio editor, then click on bookables. You will be directed to the ‘Bookable Collections Editor’ page where you can manage and organize all your bookables for your app. To add a new collection, click on the plus button to access the ‘Bookable Collection Editor’. Then, we add the name… and press save.

Once you’ve created a collection, let’s add a new bookable. Click on the plus button at the top right. Then, under the details tab, select the type of bookable.. for this lesson we will pick Calendar. Then create the name. We can leave the default interval as 15 minutes for this calendar.

Next, let’s go to appointments, click on the plus button beside the appointments to add an item. Add in the title, for this one let’s say Short, next set the price for 30 dollars, then the length of the appointment for 15 minutes, then click on the plus button to add the appointment.

Then we can add another appointment, for this one let’s say Medium, set the price to 40 dollars and the length of the appointment to 30 minutes, and add it in.

Now for the last appointment, let’s call it Long, then set the price 50 dollars and the length of the appointment to 60 minutes, add it in, and then press save.

Now that we have our bookable created, we’ll add it to navigation. Press the helper at the lower right corner and click on the Windows icon. You can then choose where to add the bookable. This time we will add it to the Left Hand Side Menu.

[Emulator] Next, in the Emulator, let's test the product from the user's perspective.

Open the left-hand side menu.

We will see that the bookable we have added is available.

Click on the bookable created. We can then select the duration of the bookable. Let's select Medium, then click on proceed.

We can then choose the timeslot we wish to get for the booking. you can also click on the plus button to show more available time slots, or the minus button to show less available time slots.

Once a time slot is selected, we can review the booking and add the card details. Then press on Checkout. A confirmation screen will show up once the booking is confirmed.

[Manager] Then as an app Manager, to check on the booking created, go to Platfio Manager, then click on Bookings to be directed to the Bookings Manager.

Next click on the booking that we have just created, and for now we will cancel this booking, select the cancel button and then let’s archive the booking.

Let’s say you want to add a placeholder for a date that you don’t want to have a booking scheduled. Click on the funnel icon and select the bookable. You can click on the time slot and add a placeholder. You can also click and hold to drag it along time slots that you don’t want to have a booking schedule, let’s say the whole morning or the whole afternoon. Then press Recalculate.

[Emulator] Let’s try to add another booking, as we can see, the timeslots that we have blocked will not show up anymore, and only the available slots will be shown to the users. We then create the booking and check it in the Bookings Manager.

[Editor] Now, if we want to have the bookable not available on certain timeslots, we can go back to the bookable, and under the settings tab click on the pen icon beside the unavailabilities, add in an unavailability. Let’s say on a Monday Lunch break, change the start time to 12 noon and the duration goes for 1 hour, then click on add, and press save.

You can repeat this multiple times to add a recurring unavailability for the rest of the weekdays.

So now if we create a new booking, the users cannot use the timeslots we have specified on the unavailability option.

[Outro] Thank you for watching!

Ready to build your app?

Put what you've learned into practice with Platfio.

More Lessons