[Template] Top Shelf Calendar - Scheduling & Bookings like Calendly

@gf_wolfer I have incorporated your template in to my app and was hoping to customise a little further. I have a separate calendar in my app, and would like to block the dates from the schedules if a user adds something to the ‘other’ calendar.

I was thinking of doing this on a looped backend workflow…but wanted to check how I would block the dates…is this something you could guide me on please?

PS this template is amazing, so pleased I found it.

Edit - I’ve worked out how to block entire days, but I’m hoping to block time ranges rather than whole days

Ahh was missing the Booked Time Range - that’s all working now. Appreciate the support @gf_wolfer.

Great to hear the template is working well for you!

I always hate to give this answer but… it depends. It depends what this ‘other calendar’ is and how you want it to relate to another calendar.

Generically speaking here, when you use the Get Available Times element to block out ‘booked time ranges’, you can use any combination of Data Sources to create a list of Booked Date/Time Ranges and feed them into the plugin - how you search or load them on page before feeding them into the plugin depends on how your app is structured and data is related.

Hi guys

Is it possible to add a lead time, so say bookings can’t be booked for two days from current date?

Certainly @lisaalger , one way to do this is described here: New Plugin: TopCal - Dates, Ranges and Time Slots - #175 by gf_wolfer

1 Like

@gf_wolfer

Hey Geoff,

I’m so glad this thread popped up and made me aware of your template. It looks outstanding and looks like it might fit my needs very well.

In addition to the web interface, I’d like to pass scheduling details through SMS and a chatbot such as AWS Lex. See any issues with doing so?

1 Like

Thanks!

As always ‘it depends’. What data would you need to pass, the Available Bookable time slots or just the confirmation/booked times?

I think both are possible, but the first one would take more work - there is a server side action to find available times with the TopCal plugin that you could use to send available times data to a chatbot API

1 Like

@gf_wolfer

Here’s the use case.

You’re a hiring manager of a restaurant. You hire all of the time, but you typically interview between 2 and 4 pm in 30 min increments. You’d like to have applicants self-schedule interviews, so you know your time is booked in advance. Self-scheduling lets the applicants immediately know you are interested in interviewing them, which keeps them informed and engaged.

As I mentioned, I really like your web UI, but I need to extend it to SMS and chat.

I can certainly text or chat the link to the calendar that you provide (seems easy), but if I want to keep the applicant within the flow of the chat/SMS convo, I might do something like this chat role play:

Geoff Bot: Chris, congratulations! We would love to speak with you about the position and would like to invite you in for an interview. We have times available Tuesday at 2, 2:30 and 3 or Thursday at 3 and 3:30. What works for you?

Applicant: I’d like Tuesday at 2, please

Geoff Bot: Great! We’ll see you at Tuesday at 2.

To wrap the calendaring up, the applicant might receive a meeting invitation via email, and the hiring manager would receive a notification of the booking, and a spot would be reserved on his calendar.

In summary, it would be great if I could get access to your calendar’s data in both a head (web UI) and headless (Chat and SMS when those are the UIs) fashion.

**Same/similar process as above for rescheduling appointments
***Sounds like your server side actions are the ticket but am curious about your feedback given more context

Thanks!

Yes, totally doable and the ‘Get Available Times’ Server Side Action would be what you are using.

Depending on where you keep the logic of the chatbot and SMS, you can use the Bubble app and that Action to be an API that gets pinged when looking for times

1 Like

Perfect! Thanks. You very likely have a new customer for your template and plug-in.

1 Like

TEMPLATE UPDATE

The template has been updated in the new(ish) Responsive Engine, all Pages, Elements, etc

top-calendar.bubbleapps.io

*testing can be difficult on all screen sizes so please let me know if you see any responsive issues and I can get them fixed quickly

I have been asked a couple of times now from users who bought the template a while ago and now want to upgrade to the new responsive engine, so instead of repeating myself over emails I will leave a response here to help direct anyone else.

The Responsive Updates will not make any changes to your Current App automatically, and can only be seen in New Apps created with the Template.

So to update your Current App with new responsive pages, you will need to

  1. Create a New App with the Template - this will give you Editor access to the template with the new responsive pages

  2. You will then need to COPY pages and elements from this App and PASTE them into your Current App
    - Unfortunately there is no way to do this easily that will work for all apps. Especially if you have customized the UI or workflows a lot from the standard template ones

Some recommendations:

  • Convert your app to the new engine one page at a time. Start with Cloning a page and updating the new page to the new responsive to try and see how much work this will be to change. This is a ‘low stakes’ way to see what converting a page is like that you can simply delete if you are not happy with it
  • You can then Copy and Paste elements with Workflows from the ‘New’ template app, but you will need to go through things carefully to make sure you set the Workflows (creating data, setting fields, etc) and UI match the look and workflows of your current app.
  • You may have an easier time converting your app to the new responsive engine and updating elements on your own so that workflows are preserved. And then just using the ‘New’ template app for elements that are tough or time consuming to convert to the new engine (the calendar element being one)

If you get stuck or find ways to do this quickly and efficiently please post here so we can help others

Hi, I like the UI but just wondering how customisable this template is. I’m not looking to create bookings but to show bookings from an external source (Airtable). specifically, I’m looking to provide a visual calendar for an airline crew roster. Would this template be adaptable enough for this use case? Thanks

The entire template is customizable, it will depend on your Bubble abilities and time you have to make whatever changes are needed. I am unfamiliar with how a calendar with an airline crew roster would look.

What UI are you thinking of, a specific element or the entire app?

A calendar UI can be copied for free from one of my free templates here:

But for the whole dashboard/navigation/app as a whole that would have to be had through purchasing this template.

hi @gf_wolfer

I think one of your plugins/elements on the demo page is not working properly ( at least for me)

Thank you for letting me know - it looks like there is an issue with the Date Picker plugins (not TopCal).
I will get that page updated with new date pickers later today and let you know when it’s working again :+1:

1 Like

@stevenrichardlevy I have those broken elements of the Air Date picker fixed. Experiencing an odd issue in how those date pickers are displaying things back in one small spot that I can look at another time, but for now it’s fully functional

1 Like

awesome - will check it out
thanks for taking a look!