Resource Calendar Functionality

So, I have an app that is 98% ready for 2 months now, and is very similar to a hotel booking app, but the dumb web designer here can’t figure out the calendar.

Here’s what I have today:

Here is what I’m looking for: i.e One full day calendar per each room bookable:

If you know of a premium plugin/theme that has full documentation for dumb web designers or a video of it, that would be great; Specially if it’s in the range of $30 instead of those U$300 themes <3

Yes, it sounds basics, but I have nothing. I’ve made a full financial module, stock, 4 integrations, smart pricing, dynamic pages for multicompanies db, but for the life of god I can’t figure the calendar out.

Hi Viktor,

Sam here, with Bubble support. Calendar functionality can be achieved in a number of different ways in bubble. I probably wouldn’t recommend going with an entire theme, but there are definitely a number of plugins that can handle this for you depending on your needs.

Based on your post and the reference to a hotel booking app, I am guessing you need a basic functionality that allows users to select a start date and end date (range of trip) and then create a record to store the details of that trip.

There are two approaches I would recommend here:

  1. Use the bubble-built full calendar plugin. With this plugin, you’ll want to define a single data type to store your events - in the context of a hotel booking app it may make sense to call this data type "Bookings. You can add fields for start date/time, end date/time, and booking title. The full calendar plugin will take all of this information, and generate a calendar for your users to view and interact with. There are included states and events that will help with the booking process - namely, you’ll get a lot of use out of the workflow event “a calendar’s day is clicked” which will allow you to show a booking form popup when a user selects a day on the calendar. Since this is a prebuilt plugin, you’ll find that the customization options here for user experience are somewhat limited, but it will achieve the functionality you’re looking for.

  2. Alternatively, you could build out a calendar entirely from scratch. This is much more complex, and will require a lot of patience to achieve exactly what you’re looking for. You’ll still want to create a booking data type, but you’ll also probably want to create option sets that store your month names and time options. Those option sets can have attributes that store the number values associated with those months and times, so that you can compare them with actual date values when needed. From there, you’ll probably want to get a plugin like 1T - List of Dates (there are others as well) that allows you to reference a dynamic list of dates. You’ll want to set up a repeating group of dates that references this list, and build out all of the functionality associated with the date cells and user interaction associated with them. Again, this is a complex approach, and will require a lot of time and effort to put together, but ultimately will be the most customizable option.

If you have any specific questions about either of these options, I’m happy to clarify, just let me know! I hope this helps!

2 Likes

Thank you for your time, Sam! I am indeed trying the bubble-built calendar and managed to display the bookings in the full day, but as you mentioned, I didn’t quite manage to customize it.

I’m chatting with some members that aparently have worked something around custom states to show the available places to book in a column as I needed it. I’ll probably work around it to publish something similar later in the year after I understand the logic.

Hi Viktor,

When you mention “available places to book in a column” it sounds like you’re looking for resource calendar functionality, and you’re correct - our full calendar plugin doesn’t currently support this.

There are some third party plugins on the marketplace that do - most of the ones I’ve seen are paid plugins, and we do have a policy as a support team to not specifically recommend an individual paid plugin. However, if you do some searching for “resource calendar,” you may find some interesting options.

The full calendar scheduler suite allows for this type of behavior

Have you checked that plug-in out yet?

For max customizability I would do the calendar from scratch. Especially what if the calendar plugin doesn’t get updated or something, your whole app revolves around one persons plugin.

Hello again @jared.gibb. Unfortunally I’m unable to see your demos as both complex and simple links are still offline.

I’ve seem videos of it, and despite having great function, I didn’t find anything similar to what I need as design. I need the visual calendar to be something like these:
That is weekly view (days as columns), but 1 full day calendar per each room)

Yes, I started a new JS course but that looks like is going take a while. It dosn’t really resolves around this calendar as the users can already use it fully, but the calendar is way better to visualise it.