FullCalendar Integration

I’m trying to build a scheduling system for users. A company will have multiple resources to be rented, and renters can log in to schedule them.

The FullCalendar website/plugin looks like it will do everything I need it to do (specifically the scheduling side of it) but I can’t find a way to integrate that into bubble. Is this even possible?

If not does anyone recommend anything else?
Thanks

I’ve integrated timekit.io which is a very flexible booking/scheduling service

2 Likes

Yea I think I saw your post on here. I have looked into TimeKit and maybe thats the way I need to go. I was just hoping fullcalendar would work since its already a plugin with bubble.

If you don’t mind I’ll need your assistance on integrating timekit into my app.

I’m currently using the built in calendar plug-in for scheduling, is there something specifically that it does not do for you?

I’m assuming your talking about the ‘full calendar’ plugin. That is what I would like to use, and on their website fullcalendar.io it shows that it does everything I need it to. but I can’t figure out how to integrate it into bubble.

I can draw the calendar and edit various cosmetic parts to it, but how would I get to show a schedule for multiple resources?

In my case I use the calendar to schedule, cancel, and reschedule appointments.

This requires two things:

  1. An item in the database to represent appointments. It should include values for everything you need such as participants and the appointment time. You’ll configure your calendar in bubble to search for these appointments

  2. Workflows to create/modify appointments. Once you have the calendar plugin installed, you’ll have two new workflow options

“When this calendars day is clicked” and “When this calender’s event is clicked”

Within my app, it says “When this calendars day” is clicked, bring up the New Appointment Group. I then have input elements on that group for all the information required to create the appointment.

Timekit.io looks better visually, but I believe you can recreate most of the features within bubble and it wont cost you anything.

Yea i figured out how to get the calendar app in bubble to do everything you said. but I need it to do it for multiple resources…

1 Company has multiple rooms that need to be rented. I need it to be something like this
http://fullcalendar.io/js/fullcalendar-scheduler-1.3.2/demos/no-overlap.html

1 Like

I see, I would create a repeating group that contains the room’s.
Then I would make it so when I click on a cell, that value is specified in in the calendar search.

I could try that. although not sure if it would work with my customers.

You should be able to recreate the functionality of the link you sent me with that method. What would the issue be?

Oh I was thinking something else. What you described sound like it would only show 1 room at a time depending on what was clicked in the repeating group. I’d like it to show all the rooms as in the link.

So, that box on the left showing the rooms? That’s your repeating group.

On mobile at the moment, but if you end up needing more specifics, I can give further assistance later.

Yea I guess i’ll need some help with it.

Yes the box on the left showing the rooms would be the repeating group, but the box on the right ‘the calendar’ would only show one room at a time right? which ever room was selected from the repeating group.

Or am I misunderstanding it?

Ahhh, I see what you are saying now. That’s definitely tricky, im not 100% that its doable.

I think timekit would work perfectly well for your needs. But - timekit.io doesn’t have an UI, as it’s just the backend. So you would need a way to display it - and unfortunately bubble’s integration of fullcalendar is pretty limited so I don’t think you’ll be able to show it in bubble like the link posted earlier.
I’m creating my own solution to this in Bubble, which works very well for me. So you can get quite far with some creativity, and I think you can come pretty close to what you want, if you don’t need to recreate the exact UI of the fullcalendar solution.
Here’s what my solution looks like so far (not 100% done). Everything in the picture below is dynamic (the months, weeks and available time slots are all fetched from timekit.io)

1 Like

My mistake, I thought time kit.io did have a UI ;), so you’re building out your own calendar element? I was thinking of doing the same. Is your “calendar” a repeating group?

Unfortunaltely it doesn’t look like I’ll be able to impletment my scheduling system. full calendar can do it, but bubble doesn’t have that integration and timekit can also do it but I can’t build a UI that will work the way I need it to. Maybe @emmanuel will have an idea?

Thanks

It’s actually many RGs based on a “source” RG (not visible) that’s populated from timekit.
One RG has the unique months from the source, one RG has the unique week numbers from the selected month in months RG, and finally there are RGs for every weekday (populated based on the selected month and week number).
Works pretty well, but unfortunately search times are sometimes a bit slower than I would like.