Updated Calendar Features for Your Bubble.io No Code Web App

Adding calendar functionality to your app adds a lot of usefulness and capability for your users. In my previous multi-blog posts starting here and the video series here, you learned the basics on how to add a calendar to your Bubble app. Now you’ll learn some additional functionality to make your calendar even more useful.

I enhanced the calendar design by implementing a scenario where one user manages a Sports Center’s field timeslot availability and other users have sports teams that are looking to schedule a field time. While the design to create available timeslots is largely the same as shown in the prior videos, in this new how-to video you’ll see some database updates to make it easier for timeslots to be seen by customers, ie sports teams.

You’ll also see how to change the colors of each event based on an event’s status, ie is a particular timeslot “free” for a team to reserve it, has a team requested a specific time slot or has a timeslot already been reserved. Without the design changes to allow for color changes, all of these scenarios would have the same event color on the calendar. So the enhanced design is a big User Experience improvement (refer to image below) as you’ll see in the video.

Calendar Color example
Different Colors for Different Event Status

Additionally, the new design allows multiple Sports Centers (different users) to create their “field availably” calendar and Teams can easily see those availability times. A simple Repeating Group is used to support this capability, including the ability for the Team to make a reservation request to a specific Sports Center for a timeslot. Each team also has their own calendar so they can quickly see all of their outstanding requests as well as confirmations for reserved field timeslots.

Even though you get some nice new capabilities with this design upgrade, you can take it one step further by implementing Messaging to the calendar so both the Sports Center and any specific Sports Team can Message each other. This blog series and related video series show you how to create messaging functionality in your app.

While the use-case is for a Sports Center and Sports Teams, this design is extensible to other use-cases. Basically any venue that provides space for patrons, ie pool halls, bowling alleys, meeting or common spaces, etc can apply this design to their use-case. Then customers or patrons can simply pick an available timeslot for their parties, competitions, meetings, etc.

This is yet another example of how powerful but relatively easy it is to build useful web-apps using Bubble.

Submit the form below to get FREE ACCESS to this design in Bubble

Leave a Reply