Amazing calendar features in Bubble.io
If you're looking to provide your Bubble app users with some amazing calendar features, then you're going to need to use AddEvent. And AddEvent is a fantastic service with an amazing API that allows you to create calendars, create events and what is really hard to do without it in Bubble, the ability to provide a link with which your users can subscribe to a calendar. So that means that you can have the events created in your app appearing in your user's Google Calendar or on their iPhones in their Apple calendars. So I'm going to show you how to do that in this mini series. But to begin with we need to get started with the API.
Getting started with the API
So in my Bubble app I'll just show you what I've got so far. I've just got a page here and I've got a create calendar. I want to create a calendar that is then linked to my user. So every user in my app could conceivably have their own calendar in AddEvent. I'm then going to probably in some follow up videos show you how we can display that calendar and how we can add in that subscribe button.
But for starters we want to go into the documentation and we want to create a calendar. So I've made a bit of a head start here. We need to take the API documentation here and put it into the Bubble API connector. And so I'm going to point out a few things and then show you where they go in the API connector. We've got our endpoint and it needs to be of type post.
Adding the API documentation to the Bubble API connector
We've then got some details here of what needs to be included in the header of the API call. So we have to have accept application Json and content type application JSon. There's also a blurred one here and this is my API key. As is the case with many applications where there's some sort of billing elements, you'll need an API key in order for a service like AddEvent, to know who to bill for the usage and basically to ensure that their service continues to run smoothly. So this would be authorization and then bearer and then my API key.
And so you can see that I made a start with that here. I've got a new API AddEvent. I've got private key in header. I've then got bearer and my API key down here, authorization. I've got my other header calls here and so I can start by adding in a call.
And so this will be create calendar and remember it's a post and because I want to use it in a workflow I set it as an action and then let's flick back. And this is my endpoint and there's only one required field here, which is title. But to demonstrate what you can do with it, I'm also going to add in time zone. So let's go back into here, paste in the endpoint and then add in the parameters so we have title and time zone. So we'll just say demo two and time zone.
Initializing the API call
We can say Europe, London. And then I'm going to click initialize call. And this is our way of checking that everything we've entered so far works. And if it works, hopefully it does brilliantly. We also get to train Bubble on what to expect as the return to the API call.
Obtaining the unique key
So the main bit here is this bit here, unique key because this is how we will identify this calendar when we come to embedding it and using other embeddable elements like the subscribe button from AddEvent. So I'm going to click save and then we will go through to design and we'll add this into a workflow. So when this button is clicked, we'll create a workflow. And now if I go into plugins, you can see all of the other plugins or APIs that I've integrated in with the past if you want to learn how to use lemon squeezy, if you want to webscrape, if you want to do speech to text. We've covered all of those in previous videos, but right now I'm looking for AddEvent and of course that's right at the top and I fill in.
Customizing the title
In fact, let's give the user a chance to customize this a bit. We'll add in a field and we'll call this one title.
So the title will be input title value. Okay. And so the execution of step one is going to create a calendar in our AddEvent account. And if I go back here and I refresh it, we can see that demo two, which is what we initialized our API call with, is already created. So I'm actually going to leave it there for now.
Adding calendar details to current user
And then we'll leave that same Europe, London now so that we can continue to work with the calendar. We need to save some details back into current user. And the way that I'm building this app, my intention is basically that every user in my app will get their own calendar. So I'm going to then say make changes to current user and I'm going to add in a field and call it calendar id.
Obtaining the unique id key
And now I can go to the results of step one and I can get the unique id key. So let's preview this. It's worth pointing out that I am logged in as a test user. So I'm going to say, well, yeah, we'll just go demo three, create calendar. Okay, now, has it worked?
Checking if the calendar is created
Well, we can go ahead and check because if it's worked and we go into data and go on to users. And this is the one I'm running. As we can see that the calendar has an id. And notice that ends in 75. Let's go into our AddEvent account and check it out.
Verifying the calendar in AddEvent
Demo three. And we'll go onto the calendar sharing page. We can see that, yes, we have a calendar with a unique id ending in 75. And basically this page here provides you with tons of different things that you can do with it. Like direct linking to a templated page that they've made, or embedding it in the Bubble app, or adding in add to calendar button here.
That is all covered. But what I'm going to show you in follow up videos is basically how you can take the code that they use to make these embeddables and you can put that straight on your Bubble app and dynamically fill it in with your calendar id.